javascript - 对不同的选择选项下拉列表进行分组

Question

我不确定这是 html 还是 javascript 技术。我想实现这样的目标，只显示两个选择框，单击“印度”后，另一个选择框将仅显示印度城市选项 name="listtwo"id="listtwo"，如果单击“美国”，则会显示城市选项。有人可以举个例子吗？非常感谢

印度 我们 德国

    <select name="listtwo" id="listtwo">
        <option value="Indiacity1">Indiacity1</option>
        <option value="Indiacity2">Indiacity1</option>
        <option value="Indiacity3">Indiacity1</option>
    </select>

  <select name="list3" id="list3">
        <option value="Germany1">Germany1</option>
        <option value="Germany2">Germany1</option>
        <option value="Germany3">Germany1</option>
    </select>

<select name="list4" id="list4">
        <option value="US1">US1</option>
        <option value="US2">US1</option>
        <option value="US3">US1</option>
    </select>​

Answer 1

HTML:

<select id="country-select">
    <option>--- Select One ---</option>
    <option value="us">US</option>
    <option value="germany">Germany</option>
</select>

<select id="us-select" class="sub-menu hide">
    <option value="austin">Austin</option>
</select>

<select id="germany-select" class="sub-menu hide">
    <option value="berlin">Berlin</option>
</select>​

CSS:

.hide {
    display: none;            
}​

jQuery:

$('#country-select').change(function (e) {
    $('.sub-menu').hide();
    var selectedCountry = $(this).val();
    if (selectedCountry) {
        $('#' + selectedCountry + '-select').show();
    }       
});​

还有供任何人查看的 fiddle :http://jsfiddle.net/RPWPZ/3/

当然，您必须添加印度以及您关心的任何其他国家/地区的所有项目。

编辑:如果您希望在页面加载时选择一个国家/地区，请查看此 fiddle 中的更改:http://jsfiddle.net/RPWPZ/5/