根據從其他組合框中選擇的選項更改下拉選項

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