Javascript 分组不同的选择选项下拉列表

我不确定这是html还是javascript技术。 我想这样做，只显示两个选择框， 单击India后，另一个选择框将仅显示Indiacities选项

name=“listtwo”id=“listtwo”

，如果单击US，则显示US cities选项。 有人能举个例子吗。非常感谢

印度 美国 德国

独立性1
独立性1
独立性1
德国1
德国1
德国1
US1
US1
US1
​

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>​

jQuery：

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

以及供任何人查看的小提琴：

当然，你必须为印度和你关心的任何其他国家添加所有项目

编辑：如果您希望在页面加载时选择一个国家，请查看此小提琴中的更改：

HTML:

jQuery：

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

以及供任何人查看的小提琴：

当然，你必须为印度和你关心的任何其他国家添加所有项目

编辑：如果您希望在页面加载时选择一个国家，请查看此小提琴中的更改：

$（函数（）{
$（'select'）.hide（）；
$（'#list2'）.show（）；
$（“.country”）。单击（函数（e）{
$（'select'）.hide（）；
$（'#'+$（e.target）.attr（'sel'））.show（）；
});
});



独立性1
独立性1
独立性1
德国1
德国1
德国1
US1
US1
US1

$（函数（）{
$（'select'）.hide（）；
$（'#list2'）.show（）；
$（“.country”）。单击（函数（e）{
$（'select'）.hide（）；
$（'#'+$（e.target）.attr（'sel'））.show（）；
});
});



独立性1
独立性1
独立性1
德国1
德国1
德国1
US1
US1
US1

再次感谢。如何显示两个选项？页面上始终显示两个选项框。因此，当页面加载时，您是否会选择默认国家/地区？我在那里添加了

——选择一个---

。我要很快修改我的小提琴。再次感谢。如何显示两个选项？页面上始终显示两个选项框。因此，当页面加载时，您是否会选择默认国家/地区？我在那里添加了

——选择一个---

。我要很快修改我的小提琴。

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

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

  $('select').hide();
  $('#list2').show();

  $('.country').click(function(e) {
    $('select').hide();
    $('#'+$(e.target).attr('sel')).show();

  });
});
</script>


<a class="country" href="javascript:;" sel="list2">India</a>&nbsp;
<a class="country" href="javascript:;" sel="list3">Germany</a>&nbsp;
<a class="country" href="javascript:;" sel="list4">US</a>&nbsp;

<br><br>

<select name="list2" id="list2">
        <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>