级联下拉选中上级选项时显示/隐藏下级下拉的实现方法

需求说明 #

需要实现三级级联下拉的显隐控制，规则如下：

• 主分类select下拉框未选中有效选项时，隐藏子分类select下拉框
• 子分类select下拉框未选中有效选项时，隐藏其下的类型/设备select下拉框

交互效果：主分类下拉默认选中值为「Select Category」，当切换选中「MainCategory1」等有效分类时，子分类下拉框自动显示；子分类选中对应有效选项后，类型分类下拉框自动显示。

初始代码 #

JS代码 #

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() {
    // 清空子分类、类型下拉的已有选项
    typedevSel.length = 1;
    subcatSel.length = 1;
    // 填充对应子分类选项
    for (var y in maincatObject[this.value]) {
      subcatSel.options[subcatSel.options.length] = new Option(y, y);
    }
  }
  subcatSel.onchange = function() {
    // 清空类型下拉的已有选项
    typedevSel.length = 1;
    // 填充对应类型选项
    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]);
    }
  }
}

HTML代码 #

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

解决方案 #

通过控制下拉元素的style.display属性实现显隐逻辑，修改后的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() {
    // 显示子分类下拉，隐藏类型下拉
    subcatSel.style.display = 'block';
    typedevSel.style.display = 'none';
    // 清空子分类、类型下拉的已有选项
    subcatSel.length = 1;
    typedevSel.length = 1;
    // 填充对应子分类选项
    for (var y in maincatObject[this.value]) {
      subcatSel.options[subcatSel.options.length] = new Option(y, y);
    }
  }
  subcatSel.onchange = function() {
    // 显示类型下拉
    typedevSel.style.display = 'block';
    // 清空类型下拉的已有选项
    typedevSel.length = 1;
    // 填充对应类型选项
    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]);
    }
  }
}

实现逻辑说明：

• 页面初始化时直接隐藏子分类、类型两个下拉框
• 主分类选项变更时，显示子分类下拉，同时隐藏类型下拉、清空之前的选择
• 子分类选项变更时，显示类型下拉、清空之前的选择

仅需在对应逻辑位置添加元素变量.style.display = 'none'/'block'代码即可完成需求。

内容的提问来源于stack exchange，提问作者Quinix