使用javascript在下拉菜單中更改內容

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

使用單選按鈕的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); 
    } 

Answer 2

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