基于从其他组合框中选择的选项更改下拉选项

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') 
    } 
});