基于第一个多选下拉列表更新第二个多选下拉列表答案

【问题标题】：Updating second multi select dropdown based on first multi select dropdown基于第一个多选下拉列表更新第二个多选下拉列表
【发布时间】：2015-02-10 12:39:20
【问题描述】：

帮助！我使用此代码使 2 个下拉菜单正常工作，以便第二个根据第一个的选择填充子类别。

Populate another select dropdown from database based on dropdown selection

它适用于单选下拉菜单，但我需要能够从第一个下拉菜单中选择多个项目，并让它显示属于第一个选择的所有项目的子类别。

目前，当在第一个下拉列表中选择了附加项目时，第二个更新仅显示最新选定项目的子类别，大概是因为它正在执行该功能的“新选项”位。当第一个选择其他项目时，如何让它将项目附加到第二个下拉列表中？非常感谢。

[edit]令人沮丧的是，我无法让它在 jsfiddle 上运行，但我会链接代码，希望它仍然有意义。不知道是不是因为它包含

 php?

:- http://jsfiddle.net/m1ugpb4o/5/

【问题讨论】：

标签： javascript php html

【解决方案1】：

使用 jQuery 更改 - http://api.jquery.com/change/

在事件处理程序中有你的 ajax 请求来填充第二个多选

编辑：用代码评论并更新如何做。（使用 jsfiddle）

【讨论】：

谢谢，我会看看 jQuery 的变化。尽管我什至在使用 jsfiddle 时遇到问题，但我已经添加了代码！
您不能在 jsfiddle 上使用 php，例如，让我们尝试将 php 取出，然后将填充值放入从数据库中获取的内容中：) - 隔离问题
链接在主帖中。谢谢
谢谢，但这不是我想要的。我有一些代码可以证明问题所在（尽管这段代码本身还有一些额外的问题）。 jsfiddle.net/m1ugpb4o/19 如果我在第一列中选择一个数字，第二个下拉列表会更新以显示第二个数组中具有该 ID 的值。问题是，如果我从数字列中进行多项选择，我希望它显示所有相应的“AOC”，但它只会更新最后一个选择

【解决方案2】：

来自原始代码链接（Populate another select dropdown from database based on dropdown selection）

不得不改变这一点：-

  function updateSubCats(){
    var catSelect = this;
    var catid = this.value;


    var subcatSelect = document.getElementById("subcatsSelect");
    subcatSelect.options.length = 0; //delete all options if any present
    for(var i = 0; i < subcats[catid].length; i++){
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id);
    }

到这里：-

  function updateSubCats(){
    var catSelect = this;
    var catid = this.value;
    var testSelectionArray = new Array();

for(var j = 0; j < this.options.length; j++) {
      if (this.options[j].selected) {
           testSelectionArray.push(this.options[j].value); 
       }
}

    var subcatSelect = document.getElementById("subcatsSelect");
    subcatSelect.options.length = 0; //delete all options if any present
    var k=0;
    for(var i = 0; i < testSelectionArray.length; i++){
      catid = testSelectionArray[i];
        for(var j = 0; j < subcats[catid].length; j++){
            subcatSelect.options[k++] = new Option(subcats[catid][j].val,subcats[catid][j].id);
        }        
    }
  }

【讨论】：