javascript - 使用javascript更改下拉列表中的内容

Question

认为我让这变得比它需要的更难。这是我的jsfiddlehttp://jsfiddle.net/justmelat/pArU7/2/

直接的html：

<form>
.
<input type="radio" name="sex" value="House">House&nbsp;&nbsp;&nbsp;
<input type="radio" name="sex" value="Cars">Cars
    <hr>
        <select name="cars">
            <option value="0">--Select--</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="wood">Wood</option>
<option value="audi">Audi</option>
<option value="brick">Brick</option>

</select>
</form>

当用户选择房子时，我只希望选择、木材和砖块选项出现在下拉列表中，当然如果选择了汽车，那么木材和砖块应该消失。

我怎样才能在javascript中轻松做到这一点？

Answer 1

演示：http: //jsfiddle.net/33tJR/

只是我制作的一个快速模型，没有什么太花哨的使用 jQuery 或任何东西

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

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

document.getElementById('house').addEventListener('click', function() {
    document.getElementById('select').innerHTML = '';

    createOption('Volvo');
    createOption('Saab');
    createOption('Fiat');
});

document.getElementById('cars').addEventListener('click', function() {
      document.getElementById('select').innerHTML = '';

    createOption('Wood');
    createOption('Brick')
});

Answer 2

使用单选按钮的 onchange 事件，如果值与 male 匹配，则调用将创建选项列表并清除现有列表并附加新列表的 javascript。所有这些都使用了jquery

  $(document).ready(function(){
  $("input[name='sex']").change(function() {
       if($(this).value === "male") { loadDLLWithOption1();  }
       else { loadDLLWithOption2(); }
    }
   });
   function loadDLLWithOption1()
    {
         var optionList = '<option>option1</option><option>option2</option>';
         $("#cars").html(optionList); 
    }