隐藏更改下拉菜单答案

【问题标题】：Hide on change dropdown menus隐藏更改下拉菜单
【发布时间】：2013-11-20 07:19:01
【问题描述】：

我正在尝试让一个网站处理电话号码，并确保它们已通过国家代码和区号验证（通过根据先前决定更改的下拉菜单进行选择）。到目前为止我所拥有的是：

<script type="text/javascript">

    $("#countryBox").change(function(){
     var selectedVal = $(this).val();

    if(selectedVal == "Canada")
    {
     $("#regionBox.usa,#regionBox.uk,#regionBox.au").hide();
     $("#regionBox.can").show();
    }
    else if(selectedVal == "United States")
    {
     $("#regionBox.can,#regionBox.uk,#regionBox.au").hide();
     $("#regionBox.usa").show();
    }
    else if(selectedVal == "United Kingdom")
    {
     $("#regionBox.usa,#regionBox.au,#regionBox.can").hide();
     $("#regionBox.uk").show();
    } else {
     $("#regionBox.usa,#regionBox.uk,#regionBox.can").hide();
     $("#regionBox.au").show();
    }
  });  
</script>

和

<form id="registration" action="post">
<label for="username">Username: <input type="textbox" id="username"/></label>
<br />
<label for="password">Password: <input type="textbox" id="password"/></label>
<br />
<label>Country: </label>
    <select id="countryBox">
        <option selected="selected" value="">Select Country</option>
        <option value="Canada">Canada</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Australia">Australia</option>
    </select>
<br />
<label>Region: </label>
    <select id="regionBox">
        <option selected="selected" value="">Select Region</option>
        <!-- canadian -->
        <option class="can" value="BC">British Columbia</option>
        <option class="can" value="AB">Alberta</option>
        <option class="can" value="SK">Saskatchewan</option>
        <option class="can" value="MB">Manitoba</option>
        <option class="can" value="QC">Quebec</option>
        <option class="can" value="ON">Ontario</option>
        <option class="can" value="NF">Newfoundland</option>
        <option class="can" value="NB">New Brunswick</option>
        <option class="can" value="NS">Nova Scotia</option>
        <option class="can" value="PEI">Prince Edward Island</option>
        <option class="can" value="YK">Yukon Territory</option>
        <option class="can" value="NW">Northwest Territory</option>
        <option class="can" value="NU">Nunavut</option>
        <!-- american -->
        <option class="usa" value="WA">Washington</option>
        <!-- british -->
        <option class="uk" value="LND">London</option>
        <!-- aussie -->
        <option class="au" value="SYD">Sydney</option>
    </select>
<br />

<br />
<label for="phone">Phone Number: <input type="textbox" id="phone"/></label>
<br />
<label for="address">Address: <input type="textbox" id="address"/></label>
<br /><br />
<button form="registration" type="submit" formmethod="post" formaction="SERVER URL HERE" d="submit">Submit</button>
<button form="registration" type="reset" id="cancel">Cancel</button>

我所做的其他 jquery 尝试不会更改下拉菜单。这个现在有下拉列表（无论如何，第一步，在三个中），但脚本似乎没有运行/工作......

关于如何使下拉菜单工作的建议？

请注意，我需要为其他国家/地区扩展区域，然后也添加区号选择...但是为了达到那一步，我需要第一个工作...

【问题讨论】：

您的.can 的样式是否为display:none？
我似乎根本无法让以下建议发挥作用。这几乎就像页面无法识别js一样。

标签： javascript jquery html drop-down-menu

【解决方案1】：

此外，更改事件并未绑定到元素。您需要添加 $( function() { 到您的代码。您添加的 javascript/jQuery 可能不会触发，除非它们在 DOM 就绪函数中（对于 jQuery 绑定元素）。

【讨论】：

【解决方案2】：

您可以使用此代码：

$("#countryBox").change(function(){ var selectedVal = $(this).val(); $("#regionBox 选项").hide(); if(selectedVal == "加拿大") { $("#regionBox option.can").show(); } else if(selectedVal == "美国") { $("#regionBox option.usa").show(); } else if(selectedVal == "英国") { $("#regionBox option.uk").show(); } 别的 { $("#regionBox option.au").show(); } });

【讨论】：

【解决方案3】：

问题在于 jQuery 选择器会查找任何 id 为 regionBox 且 className 设置为 can、usa、uk 或 au 的元素。对于加拿大，您需要将其更改为 $('#regionBox option.can');，对于所有其他人也是如此。你可以这样做：

$("#countryBox").change(function(){
    var selectedVal = $(this).val();

    $("#regionBox option").hide(); 

    switch(selectedVal) {
        case "Canada":
            $("#regionBox option.can").show();
            break;
        case "United States":
            $("#regionBox option.usa").show();
            break;
        case "United Kingdom":
            $("#regionBox option.uk").show();
            break;
        default:
            $("#regionBox option.au").show();
    }
});

【讨论】：