Question

认为我正在努力实现这一目标。这是我的jsfiddle http://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事件，如果值与男性匹配，请调用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); 
    }

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

2 个答案: