javascript - 当 JS 说不应该时显示 HTML

Question

我选择了在加载时显示 title 属性。我有一些 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>

当您选择另一个选项时，我根本无法让代码片段工作。代码片段中唯一的代码是用于 ap 和电缆的。代码在我的服务器上运行文件，我相信对于这个片段来说已经足够好了。加载时显示的 aps div 的主要问题是问题所在。如何让它在加载时不显示？

如果需要额外的代码或信息，请提出要求。

Answer 1

我在 CSS 中实现了您的问题。

#aps {
  display: none;
}

默认情况下，这会在加载时隐藏 ID 为“aps”的 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>