如何更新第二選擇基於第一個選擇框中選擇的原型的JavaScript？

Question

我正在使用選擇的原型。 我想根據第一個選擇框更新第二個選擇框。這個怎麼做？ 我能夠觸發onchange事件，但我無法根據第一個選擇框中的onchange事件更新第二個選擇框。

<select class="chzn-select" id="one"> 
    <option>one</option> 
    <option>two</option> 
    <option>three</option> 
</select> 
<select class="chzn-select" id="two"> 
    </select> 


$$('#one').each(function(select) { 
    new Chosen(select); 
}) 
.invoke('observe', 'change', function() { 
    alert(document.getElementById("one").value); 

    //update the second select here 


}); 
$$('#two').each(function(select) { 
    new Chosen(select); 
}) 
.invoke('observe', 'change', function() { 
    alert(document.getElementById("two").value); 
}); 

Answer 1

這是基於DOM例如更新代碼：

// get value of #one 
var v = document.getElementById("one").value; 

// get select #two 
var sel = document.getElementById("two"); 

// remove all options 
while (sel.childNodes.length > 0) { 
    sel.removeChild(sel.childNodes[0]); 
} 

// add 2 new options 
var o1 = document.createElement('option'); 
o1.innerHTML = v + '-one'; 
sel.appendChild(o1); 

var o2 = document.createElement('option'); 
o2.innerHTML = v + '-two'; 
sel.appendChild(o2); 

// update chosen 
Event.fire($("two"), "liszt:updated");