Question

我有一个选择，显示加载时的title属性。我有一些JS，所以当选择某些选项时，不同的div显示。我的问题是div显示加载，我不希望它们显示，直到选择了正确的选项。

＆＃13;

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';
  }
}

＆＃13;

<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>

＆＃13;

当您选择其他选项时，我无法让代码段完全正常工作。代码段中唯一的代码是针对aps和cable的代码。代码在我的服务器上运行文件，对于我认为的这个代码段来说已经足够了。在加载时显示的aps div的主要问题是问题。如何让它在加载时不显示？

如果需要其他代码或信息，请随时提出。

Answer 1

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

.avoid-clicks { pointer-events: none; }

默认情况下，这会在加载时隐藏ID为'aps'的div。然后，您可以修改样式以在需要时显示它。

#aps {
  display: none;
}

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;
}

当JS说它不应该是时显示HTML

1 个答案: