根据第一个多选下拉菜单更新第二个多选下拉菜单

Question

帮助！我使用这段代码得到2个下拉菜单，以便第二个下拉菜单根据第一个选项填充子类别。

Populate another select dropdown from database based on dropdown selection

它工作正常的单一选择下拉菜单中，但我需要能够从第一个下拉列表中选择多个项目，并把它显示属于所有从第一所选项目的子类别。

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

令人沮丧的是我不能在jsfiddle上工作，但我会链接代码，希望它仍然有意义。不知道这是因为它含有

php? 

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

Answer 1

从原来的代码链接（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); 
     }   
    } 
    } 

Answer 2

使用jQuery的变化 - http://api.jquery.com/change/

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

编辑： 评论与代码和病毒更新如何做到这一点。 （使用的jsfiddle）