javascript - 在我的第一个 Select 语句中选择选项时隐藏/显示下一个 Select 语句

Question

我目前正在尝试隐藏子类别选择语句，只要在我的第一个选择语句中没有选择主类别。子类别中的 select-type-statement 也是如此。我使用的级联下拉列表的方法与您可以在 w3schools 上找到的方法相同，否则代码在下面。

您知道在未选择上面的选择层次结构时如何隐藏子类别/类型吗？

例如：

选择 Maincategory（默认为“Select Category）”，当我将“Select Category”更改为“MainCategory1”时，出现子类别的 select 语句。Then when the Subcategory option is picked, the typecategory select statement appears.

我希望很清楚我想要做什么。此外，请原谅我对英语的不良使用。英语不是我的母语。

var maincatObject = {
  "MainCategory1": {
    "Subcategory 1.1": ["Type 1.1.1", "Type 1.1.2"],
    "Subcategory 1.2": ["Type 1.2.1", "Type 1.2.2"],
    "Subcategory 1.3": ["Type 1.3.1", "Type 1.3.2"],
    "Subcategory 1.4": ["Type 1.4.1", "Type 1.4.2"]
  },
  "MainCategory2": {
    "Subcategory 2.1": ["Type 2.1.1", "Type 2.1.2"],
    "Subcategory 2.2": ["Type 2.2.1", "Type 2.2.2"],
    "Subcategory 2.3": ["Type 2.3.1", "Type 2.3.2"],
    "Subcategory 2.4": ["Type 2.4.1", "Type 2.4.2"]
  }
}
window.onload = function() {
  var maincatSel = document.getElementById("maincat");
  var subcatSel = document.getElementById("subcat");
  var typedevSel = document.getElementById("typedev");
  for (var x in maincatObject) {
    maincatSel.options[maincatSel.options.length] = new Option(x, x);
  }
  maincatSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    typedevSel.length = 1;
    subcatSel.length = 1;
    //display correct values
    for (var y in maincatObject[this.value]) {
      subcatSel.options[subcatSel.options.length] = new Option(y, y);
    }
  }
  subcatSel.onchange = function() {
    //empty Chapters dropdown
    typedevSel.length = 1;
    //display correct values
    var z = maincatObject[maincatSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

<select name="maincat" id="maincat">
  <option value="" selected="selected">Select Category</option>
</select>
<br><br> Sub-Category:
<select name="subcat" id="subcat">
  <option value="" selected="selected">Please select sub-category first</option>
</select>
<br><br> Type/Device:
<select name="typedev" id="typedev">
  <option value="" selected="selected">Please select type or device</option>
</select>
<br><br>

解决方案：

我设法做到了，对于那些想知道我是如何做到的人……这是修改后的 JS 代码：

window.onload = function() {
  var maincatSel = document.getElementById("maincat");
  var subcatSel = document.getElementById("subcat");
  var typedevSel = document.getElementById("typedev");
  for (var x in maincatObject) {
    maincatSel.options[maincatSel.options.length] = new Option(x, x);
    subcatSel.style.display = 'none';
    typedevSel.style.display = 'none';
  }
  maincatSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    subcatSel.style.display = 'block';
    typedevSel.style.display = 'none';
    subcatSel.length = 1;
    typedevSel.length = 1;
    //display correct values
    for (var y in maincatObject[this.value]) {
      subcatSel.options[subcatSel.options.length] = new Option(y, y);
    }
  }
  subcatSel.onchange = function() {
    //empty Chapters dropdown
    typedevSel.style.display = 'block';
    typedevSel.length = 1;
    //display correct values
    var z = maincatObject[maincatSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      typedevSel.options[typedevSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

诀窍是简单地放置“variablename.style.display = 'none'/'block';” 在正确的位置。请记住，代码是从上面读取的，其余的我只是用我的大脑，呵呵。我希望这将帮助任何寻找答案的人。:)

标签： javascripthtmljqueryshow-hidecascadingdropdown

Answer 1

试试这个代码

<style>
    #sub1, #type1{
        display: none;
    }
</style>

<select name="main" id="main">
    <option value="0" selected>Select Option</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>
<select name="sub1" id="sub1">
    <option value="0" selected>Select Option</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>
<select name="type1" id="type1">
    <option value="0" selected>Select Option</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
</select>

<script>
    var main = document.getElementById('main');
    var sub1 = document.getElementById('sub1');
    var type1 = document.getElementById('type1');
    
    main.addEventListener('change', function(element){
        if(element.target.value == 'value1'){
            sub1.style.display = 'block';
        }else{
            sub1.style.display = 'none';
        }
    });
    
    sub1.addEventListener('change', function(element){
        if(element.target.value == 'value1'){
            type1.style.display = 'block';
        }else{
            type1.style.display = 'none';
        }
    });
</script>