根据其他组合框中的选定选项更改下拉选项

时间:2014-10-03 17:31:55

标签: javascript html drop-down-menu

我有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/

请帮助:)

1 个答案:

答案 0 :(得分: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')
  }
});