根據第一個多選下拉菜單更新第二個多選下拉菜單

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）