如何根据另一个下拉值选择多选动态填充的下拉列表

Question

如何根据另一个下拉值选择来多选动态填充的下拉列表？

我在页面上有 2 个下拉菜单。第一个实例的第二个下拉列表将为空。当您选择第一个下拉列表中的值时，根据该值，第二个下拉列表将可用。现在我想要第二个下拉菜单作为多选。

var mealsByCategory = {
    A: ["Soup", "Juice", "Tea", "Others"],
    B: ["Soup", "Juice", "Water", "Others"],
    C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
}

    function changecat(value) {
        if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in mealsByCategory[value]) {
                catOptions += "<option>" + mealsByCategory[value][categoryId] + "</option>";
            }
            document.getElementById("category").innerHTML = catOptions;
        }
    }

<select name="meal" id="meal" onChange="changecat(this.value);">
    <option value="" disabled selected>Select</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<select name="category" id="category">
    <option value="" disabled selected>Select</option>
</select>

有人知道我怎样才能得到这个吗？

Answer 1

如果您想直接使用 JavaScript 方式，您唯一需要做的就是将您的第二个 select 更改为多选（例如 <select multiple>），然后捕获选定的值...

但是，为了使其更易于维护，以及包括复选框方法，您可以创建自己的方法来动态设置它们（并且有很多方法可以实现）。一起来看看吧：

var mealsByCategory = {
  A: ["Soup", "Juice", "Tea", "Others"],
  B: ["Soup", "Juice", "Water", "Others"],
  C: ["Soup", "Juice", "Coffee", "Tea", "Others"]
};

function changecat(value) {
  if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
  else {
    var catOptions = "";
    for (categoryId in mealsByCategory[value]) {
    	var category = mealsByCategory[value][categoryId];
      catOptions += "<label><input type='checkbox' name='categories' value='" + category + "' onclick='checkOptions()'>" 
      	+  category + "</input></label>";
    }
    document.getElementById("checkboxes").innerHTML = catOptions;
  }
}

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

function checkOptions() {
  els = document.getElementsByName('categories');
  var selectedChecks = "", qtChecks = 0;
  for (i = 0; i < els.length; i++) {
  	if (els[i].checked) {
      if (qtChecks > 0) selectedChecks += ", "
	  selectedChecks += els[i].value;
      qtChecks++;
    }
  }
  
  if(selectedChecks != "") {
    document.getElementById("defaultCategory").innerText = selectedChecks;
  } else {
    document.getElementById("defaultCategory").innerText = "Select an option";
  }
}

div.multiselect, select#meal, button {
  margin: 5px;
}

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<select name="meal" id="meal" onchange="changecat(this.value);">
  <option value="" disabled selected>Select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<div class="multiselect">
  <div class="selectBox" onclick="showCheckboxes()">
    <select name="category" id="category">
      <option id="defaultCategory">Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div id="checkboxes"></div>
</div>

看到我刚刚将您的帖子改编为 @vitfo 解决方案的（请参阅原始帖子 here），所以如果它适合您，请不要忘记也感谢他。

此外，我们还有许多其他选项可以使用插件而不是 handy-way 来处理带有复选框的多选。这方面的一个很好的例子是Multiple Select library，它很容易做出同样的事情。

Answer 2

您可以使用提供此功能的 jquery 插件，而不是自己开发：https://github.com/dnasir/jquery-cascading-dropdown