javascript - 根据先前选择标签中的选择设置选择标签的可见性

Question

我想让我的州选择下拉列表仅在之前的下拉列表中选择了一个国家/地区后才可见。

这是我的代码:

<form>
    Name: <input type="text" name="name" autofocus>
    <br />
    E-mail: <input type="text" name="email">
    <br />
    <input type="radio" name="sex" value="male">Male
    <br />
    <input type="radio" name="sex" value="female">Female
    <br />
    <select name="country" onchange="showStates()" id="country">
        <option>Select A Country</option>
        <option id="US" value="US">USA</option>
        <option id="AUS" value="AUS">Australia</option>
    </select>
    <br />
    <select name="State" style="display:none;" id="us-states">
        <option>Select A State</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>
    <br />
    <select name="State" style="display:none;" id="aus-states">
        <option value="" selected="selected">Select A State</option>
        <option value="TAS">Tasmania</option>
        <option value="QLD">Queensland</option>
        <option value="VIC">Victoria</option>
    </select>
    <br />
    <button type="submit">Submit</button>
    <br />
    <input type="reset" value="Reset">
</form>

这里是 showStates() 函数:

function showStates() {
    var selected = $('#country :selected').text();

    if (selected == "US") {
        document.getElementByID('us-states').style.display = "block;"; 
    } else {
        document.getElementByID('us-states').style.display = "none;";
    }

    if(selected == "AUS") {
        document.getElementByID('aus-states').style.display = "block;"; 
    } else {
        document.getElementByID('aus-states').style.display = "none;";}
    }
}

我发现该程序最初隐藏了选择框，但在国家标签中选择了新选项后并没有重新绘制它们。

Answer 1

因为您已经在使用 jQuery，所以您可以取消内联函数调用。只需添加一个更改处理程序，并使用 #country 的值来确定要显示的元素:

$('#country').on('change', function() {

   var country = this.value.toLowerCase();

   $('select[name="State"]').hide() 
                            .filter('#' + country + '-states') 
                            .show();
});

Here's a fiddle