基於從其他組合框中選擇的選項更改下拉選項

Question

我有2個下拉菜單，如果我從第一個下拉框中選擇一個特定的選項，一組選項應該出現在另一個下拉框中，如果我選擇其他選項從第一個下拉菜單中選擇不同的選項應該在第二個下拉菜單中出現。

我試着做一個小提琴，但它不工作。

function createOption(value) { 
    el = document.createElement('option'); 
    el.value = value; 
    el.innerHTML = value; 
    el.id = value; 

    document.getElementById('select').appendChild(el); 
} 

if(document.getElementById('Type').value === "CD"){ 
    document.getElementById('select').innerHTML = ''; 

    createOption('Volvo'); 
    createOption('Saab'); 
    createOption('Fiat'); 
}; 
else{ 
     document.getElementById('select').innerHTML = ''; 
     createOption('Wood'); 
     createOption('Brick') 
} 

http://jsfiddle.net/33tJR/10/

請幫助:)

Answer 1

與您的代碼的主要問題是，你不必在一個實際的「的onchange」事件，它將對發生的任何事件監聽器第一下拉。

您當前密碼容易的解決辦法是這樣的：

function createOption(value) { 
    el = document.createElement('option'); 
    el.value = value; 
    el.innerHTML = value; 
    el.id = value; 

    document.getElementById('select').appendChild(el); 
} 
document.getElementById('Type').addEventListener("change", function(){ 
    if(document.getElementById('Type').value === "CD"){ 
     document.getElementById('select').innerHTML = ''; 

     createOption('Volvo'); 
     createOption('Saab'); 
     createOption('Fiat'); 
    } 
    else{ 
     document.getElementById('select').innerHTML = ''; 
     createOption('Wood'); 
     createOption('Brick') 
    } 
});