我有一个选择,在加载时显示标题属性。我有一些JS,因此当选择某些选项时,将显示不同的div。我的问题是div 在加载时显示,我不希望它们在选择正确的选项之前显示。
function typePicker() {
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if (sel.value == "aps") {
aps.style.display = 'block';
} else {
aps.style.display = 'none';
}
if (sel.value == "cables") {
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML = cables; // This line will be changed soon to the style above in process of doing this to all.
} else {
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div>
<!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div>
<!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div>
<!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands">
</div>
<!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div>
<!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type='date')" onblur="(this.type'text')" id="date-bought" name="dateBought">
</div>
<!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br>
<!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="warranty-date" name="warrantyDate">
</div>
<!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div>
<!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>
当您选择另一个选项时,我根本无法让代码片段工作。代码片段中唯一有代码的是 aps 和电缆的代码。代码在我的服务器上工作文件,我相信对于这个片段来说已经足够了。apsdiv 在加载时显示的主要问题是问题。如何使其在加载时不显示?
如果需要其他代码或信息,请询问。
我在 CSS 中实现了您的问题要求。
#aps {
display: none;
}
默认情况下,这将在加载时隐藏带有"aps"ID 的div。然后,您可以修改样式以在需要时显示它。
function typePicker(){
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if(sel.value=="aps"){
aps.style.display = 'block';
}else{
aps.style.display = 'none';
}
if(sel.value=="cables"){
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML=cables; // This line will be changed soon to the style above in process of doing this to all.
}else{
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
#aps {
display: none;
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div> <!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div> <!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div> <!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" >
</div> <!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div> <!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type='date')" onblur="(this.type'text')" id="date-bought" name="dateBought">
</div> <!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br><!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="warranty-date" name="warrantyDate">
</div><!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div><!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>