Question

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

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

  asia, europe, america, africa.

现在考虑使用国家/地区作为选项的另一个名为国家/地区的下拉列表。我需要的是，如果我从下拉列表大陆中选择亚洲，则只有亚洲中的国家/地区必须显示在下拉列表国家/地区

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

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解决方案感兴趣，请参阅this fiddle

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

3 个答案: