Question

大家好，我要问如何在第二个下拉列表中显示取决于第一个下拉列表的信息。

示例。我有这个：

var option = document.getElementById("second_dropdown").getElementsByTagName("option");
for (var j = 0; j < option.lenght; j++) {
  option[j].disabled = true;
}

<!-- DROPDOWN 1 -->
<select id="first_dropdown" name="first_d">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<!--  DROPDOWN 2 -->
<select id="second_dropdown" name="second_d">
  <optgroup label="1">
    <option value="100">blabla</option>
    <option value="101">blabla</option>
    <option value="102">blabla</option>
    </option>
    <optgroup label="2">
      <option value="103">blabla</option>
      <option value="104">blabla</option>
      <option value="105">blabla</option>
      </option>
      <optgroup label="3">
        <option value="106">blabla</option>
        <option value="107">blabla</option>
        <option value="108">blabla</option>
        </option>
        <select>

我想仅在下拉列表2中显示在下拉列表1中选择的optgroup ...

我真的不了解js，所以我希望我能很好地解释一下，并在此先感谢：）

但是在这里，我只禁用所有功能（并且我只想禁用下拉菜单中未选择的内容），并且我不想禁用但我想取消显示。

Answer 1

循环遍历第二个optgroup的{{1}}，然后循环检查第一个选择的<select>是否等于value的{{1}}删除label

optgroup

disabled

如果要显示/隐藏document.querySelector("#first_dropdown").onchange = function(){ var val = this.value; document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){ ele.disabled = ele.label != val }); };，也应该更改element的<select id="first_dropdown" name="first_d"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <select id="second_dropdown" name="second_d"> <optgroup label="1"> <option value="100">blabla</option> <option value="101">blabla</option> <option value="102">blabla</option> </optgroup> <optgroup label="2"> <option value="103">blabla</option> <option value="104">blabla</option> <option value="105">blabla</option> </optgroup> <optgroup label="3"> <option value="106">blabla</option> <option value="107">blabla</option> <option value="108">blabla</option> </optgroup> <select>属性

display

您还可以使用jquery简化这项工作

optgroup

Answer 2

您可以尝试以下方式：

function fillIFrame(iframe) {
   // Using the parent Document object
   var header = document.createElement("header");
   header.appendChild(document.createTextNode("Header."));
   iframe.contentDocument.body.appendChild(header);
}

var firstDD = document.getElementById('first_dropdown');
firstDD.addEventListener('change',changeDD);
function changeDD(){
  var fValue = firstDD.value;
  document.querySelectorAll('#second_dropdown > optgroup').forEach(function(el){
    if(el.label != fValue )
      el.style.display='none';
    else
      el.style.display='block';
  });
  document.querySelector('#second_dropdown').value = "";
}
changeDD(firstDD);

JS下拉菜单取决于其他下拉菜单

2 个答案: