根据从其他组合框中选择的选项更改下拉选项答案

【问题标题】：Change the drop down option based on the selected option from other combobox根据从其他组合框中选择的选项更改下拉选项
【发布时间】：2014-10-04 01:47:39
【问题描述】：

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

请帮忙:)

【问题讨论】：

SO 已经有很多这样的问题了，只要搜索一下……顺便说一句。 option 不能有 HTML，使用 text 代替 innerHTML。

标签： javascript html drop-down-menu

【解决方案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')
  }
});

【讨论】：