隐藏更改下拉菜单

Question

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

<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尝试不会改变下拉列表。这个有下拉菜单（无论如何，第一步，三个），但脚本似乎没有运行/工作......

关于如何让下拉列表工作的建议？

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

Answer 1

问题是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(); } }); 。你可以这样做：

{{1}}

Answer 2

您可以使用此代码：

$("#countryBox").change(function(){

     var selectedVal = $(this).val();
    $("#regionBox option").hide();
    if(selectedVal == "Canada")
    {
     $("#regionBox option.can").show();
    }
    else if(selectedVal == "United States")
    {
     $("#regionBox option.usa").show();
    }
    else if(selectedVal == "United Kingdom")
    {
     $("#regionBox option.uk").show();
    } else {
     $("#regionBox option.au").show();
    }
  });

Answer 3

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