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

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>），然后捕获所选值...

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

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），所以如果它适合你，不要忘记给予他信任。

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

Answer 2

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