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

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 )，所以如果适合您，也不要忘记感谢他。

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