javascript - 在另一个下拉列表中的选择上切换下拉列表中选项的可见性

Question

我想知道如何根据我们在另一个下拉列表中选择的内容来切换下拉列表中选项的可见性。

例如：考虑一个名为continent的下拉列表，其中包含以下选项：

  asia, europe, america, africa.

现在考虑另一个以国家为选项的名为country的下拉列表。我需要的是，如果我从下拉大陆中选择亚洲，则只有亚洲国家必须在下拉国家中可见。

我无法完成这项工作。请帮助我。

Answer 1

看看这个：不完全相同，但这是一个开始:)

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

Answer 2

这是另一个示例，比评论中的链接（我也 +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 3

如果您对更通用的非 jquery 解决方案感兴趣，请参阅此小提琴