如何解决修改JSFiddle如何根据上一个下拉菜单中选择的内容进行附加级别的下拉菜单?
我正在使用此jsfiddle作为参考:https://jsfiddle.net/patelriki13/m1ezs70o/
是使用国家/地区作为项目的级联下拉列表。我试图在此添加另一个级别,而不是4个级别,而是5个级别。我试图在“ zips”之前添加另一组街道名称的对象,并根据的方式为其添加另一个onchange函数下面的onchange函数之一,但是它不起作用。我该如何实现这一目标?
HTML:
<form name="myform" id="myForm">
<select id="countySel" size="1">
<option value="" selected="selected">-- Select Country --</option>
</select>
<br>
<br>
<select id="stateSel" size="1">
<option value="" selected="selected">-- Select State--</option>
</select>
<br>
<br>
<select id="citySel" size="1">
<option value="" selected="selected">-- Select City--</option>
</select>
<br>
<br>
<select id="zipSel" size="1">
<option value="" selected="selected">-- Select Zip--</option>
</select>
</form>
JAVASCRIPT:
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001","90002","90003","90004"],"San Diego": ["92093","92101"]
},"Texas": {
"Dallas": ["75201","75202"],"Austin": ["73301","73344"]
}
},"India": {
"Assam": {
"dispur": ["781005"],"Guwahati" : ["781030","781030"]
},"Gujarat": {
"Vadodara" : ["390011","390020"],"Surat" : ["395006","395002"]
}
}
}
window.onload = function () {
//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel");
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");
//Load countries
for (var country in countryStateInfo) {
countySel.options[countySel.options.length] = new Option(country,country);
}
//County Changed
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedindex < 1)
return; // done
for (var state in countryStateInfo[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state,state);
}
}
//State Changed
stateSel.onchange = function () {
citySel.length = 1; // remove all options bar first
zipSel.length = 1; // remove all options bar first
if (this.selectedindex < 1)
return; // done
for (var city in countryStateInfo[countySel.value][this.value]) {
citySel.options[citySel.options.length] = new Option(city,city);
}
}
//City Changed
citySel.onchange = function () {
zipSel.length = 1; // remove all options bar first
if (this.selectedindex < 1)
return; // done
var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
for (var i = 0; i < zips.length; i++) {
zipSel.options[zipSel.options.length] = new Option(zips[i],zips[i]);
}
}
}
任何帮助我指出正确方向的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。