在另一個下拉列表中選擇下拉列表中選項的可見性

Question

我想知道如何根據我們在另一個下拉列表中選擇的內容在下拉列表中切換選項的可見性。

例如：考慮一個下拉命名大陸與選擇：

asia, europe, america, africa. 

現在考慮另一個下拉名爲國家與國家的選擇。 什麼，我需要的是，如果我從下拉大陸選擇亞洲只有在國家亞洲必須在下拉國家可見。

我無法完成這項工作。請幫助我。

Answer 1

下面是另一個例子，不是簡單的鏈接（我也+ 1D）在評論

http://jsfiddle.net/joevallender/Y6Rjz/1/

代碼如下

HTML

<label for="continent">Continent</label> 
<select id="continent"> 
    <option value=""> -- Please select -- </option> 
    <option value="asia">Asia</option> 
    <option value="europe">Europe</option> 
</select> 

<label for="country">Country</label> 
<select id="country"></select> 

JS

var data = { 
    asia: [ 
     'china', 
     'japan' 
    ], 
    europe: [ 
     'france', 
     'germany' 
    ] 
} 

$('#continent').change(function(){ 
    var value = $(this).val(); 
    var list = data[value]; 
    $('#country').empty(); 
    $('#country').append(new Option(' -- Please select -- ','')); 
    for(var i = 0; i < list.length; i++) { 
     $('#country').append(new Option(capitaliseFirstLetter(list[i]),list[i])) 
    } 
}) 

// Helper from http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript 
function capitaliseFirstLetter(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
} 

Answer 2

看看這個：不準確相同，但它是一個開始:)

http://jsfiddle.net/Diabl0570/M82JF/4/

Answer 3

如果你有興趣在一個更通用的，非jQuery的解決方案，請參閱this fiddle