我正在尝试建立一个网站来处理电话号码并确保它们通过国家/地区代码和区号进行验证(通过根据之前的决定更改的下拉菜单进行选择)。到目前为止我所拥有的是:
<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尝试不会改变下拉列表。这个有下拉菜单(无论如何,第一步,三个),但脚本似乎没有运行/工作......
关于如何让下拉列表工作的建议?
请注意,我需要扩展其他国家/地区的区域,然后再添加区号选择...但是为了达到这个目的,我需要第一个工作...
答案 0 :(得分:0)
问题是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}}
答案 1 :(得分:0)
您可以使用此代码:
$("#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(); } });
答案 2 :(得分:0)
此外,更改事件未绑定到元素。你需要添加
$( function() {
代码。你添加的javascript / jQuery可能不会触发,除非它们在DOM ready函数内(对于jQuery绑定元素)。