(地址级联)省市两级级联(通过js实现)

jsp文件中代码片段如下:
<tr>
<th>单位住址</th>
<td><select id="provinceCompany" name="provinceCompany" οnchange="selectCompanyCity(this.value);" style="width:80px"></select>
<select id="areaCompany" name="areaCompany" style="width:100px"> </select>
</td>
</tr>


<div style="display:none;">
<input id="dwProvinceCompany" name="dwProvinceCompany" value="${student.dwProvinceCompany}"/>
<input id="dwAreaCompany" name="dwAreaCompany" value="${student.dwAreaCompany}"/>
</div>

js文件内容如下:
var city=[{name:'请选择',subCity:[{name:'请先选择省份'}]},{name:'北京',
subCity:[
{name:'请选择'},
{name:'东城区'},
{name:'西城区'},
{name:'崇文区'},
{name:'宣武区'},
{name:'朝阳区'},
{name:'丰台区'},
{name:'石景山区'},
{name:'海淀区'},
{name:'门头沟区'},
{name:'房山区'},
{name:'通州区'},
{name:'顺义区'},
{name:'昌平区'},
{name:'大兴区'},
{name:'怀柔区'},
{name:'平谷区'},
{name:'密云区'},
{name:'延庆区'}]},

{name:'天津',
subCity:[{name:'请选择'},
{name:'和平区'},
{name:'河东区'},
{name:'河西区'},
{name:'南开区'},
{name:'河北区'},
{name:'红桥区'},
{name:'塘沽区'},
{name:'汉沽区'},
{name:'大港区'},
{name:'东丽区'},
{name:'西青区'},
{name:'津南区'},
{name:'北辰区'},
{name:'武清区'},
{name:'宝坻区'}]},

{name:'河北',
subCity:[{name:'请选择'},
{name:'石家庄市'},
{name:'唐山市'},
{name:'秦皇岛市'},
{name:'邯郸市'},
{name:'邢台市'},
{name:'保定市'},
{name:'张家口市'},
{name:'承德市'},
{name:'沧州市'},
{name:'廊坊市'},
{name:'衡水市'}]},

{name:'山西',
subCity:[{name:'请选择'},
{name:'太原市'},
{name:'大同市'},
{name:'阳泉市'},
{name:'长治市'},
{name:'晋城市'},
{name:'朔州市'},
{name:'晋中市'},
{name:'运城市'},
{name:'忻州市'},
{name:'临汾市'},
{name:'吕梁市'}]},

{name:'内蒙古',
subCity:[
{name:'请选择'},
{name:'呼和浩特市'},
{name:'包头市'},
{name:'乌海市'},
{name:'赤峰市'},
{name:'通辽市'},
{name:'鄂尔多斯市'},
{name:'呼伦贝尔市'},
{name:'巴彦淖尔市'},
{name:'乌兰察布市'},
{name:'兴安盟'},
{name:'锡林郭勒盟'},
{name:'阿拉善盟'}]},

{name:'辽宁',
subCity:[
{name:'请选择'},
{name:'沈阳市'},
{name:'大连市'},
{name:'鞍山市'},
{name:'抚顺市'},
{name:'本溪市'},
{name:'丹东市'},
{name:'锦州市'},
{name:'营口市'},
{name:'阜新市'},
{name:'辽阳市'},
{name:'盘锦市'},
{name:'铁岭市'},
{name:'朝阳市'},
{name:'葫芦岛市'}]},

{name:'吉林',
subCity:[{name:'请选择'},
{name:'长春市'},
{name:'吉林市'},
{name:'四平市'},
{name:'辽源市'},
{name:'通化市'},
{name:'白山市'},
{name:'松原市'},
{name:'白城市'},
{name:'延边朝鲜族自治州'}]},

{name:'黑龙江',
subCity:[{name:'请选择'},
{name:'哈尔滨市'},
{name:'齐齐哈尔市'},
{name:'鸡西市'},
{name:'鹤岗市'},
{name:'双鸭山市'},
{name:'大庆市'},
{name:'伊春市'},
{name:'佳木斯市'},
{name:'七台河市'},
{name:'牡丹江市'},
{name:'黑河市'},
{name:'绥化市'},
{name:'大兴安岭地区'}]},

{name:'上海',
subCity:[{name:'请选择'},
{name:'黄浦区'},
{name:'卢湾区'},
{name:'徐汇区'},
{name:'长宁区'},
{name:'静安区'},
{name:'普陀区'},
{name:'闸北区'},
{name:'虹口区'},
{name:'杨浦区'},
{name:'闵行区'},
{name:'宝山区'},
{name:'嘉定区'},
{name:'浦东新区'},
{name:'金山区'},
{name:'松江区'},
{name:'青浦区'},
{name:'南汇区'},
{name:'奉贤区'}]},

{name:'江苏',
subCity:[{name:'请选择'},
{name:'南京市'},
{name:'无锡市'},
{name:'徐州市'},
{name:'常州市'},
{name:'苏州市'},
{name:'南通市'},
{name:'连云港市'},
{name:'淮安市'},
{name:'盐城市'},
{name:'扬州市'},
{name:'镇江市'},
{name:'泰州市'},
{name:'宿迁市'}]},

{name:'浙江',
subCity:[{name:'请选择'},
{name:'杭州市'},
{name:'宁波市'},
{name:'温州市'},
{name:'嘉兴市'},
{name:'湖州市'},
{name:'绍兴市'},
{name:'金华市'},
{name:'衢州市'},
{name:'舟山市'},
{name:'台州市'},
{name:'丽水市'}]},

{name:'安徽',
subCity:[{name:'请选择'},
{name:'合肥市'},
{name:'芜湖市'},
{name:'蚌埠市'},
{name:'淮南市'},
{name:'马鞍山市'},
{name:'淮北市'},
{name:'铜陵市'},
{name:'安庆市'},
{name:'黄山市'},
{name:'滁州市'},
{name:'阜阳市'},
{name:'宿州市'},
{name:'巢湖市'},
{name:'六安市'},
{name:'亳州市'},
{name:'池州市'},
{name:'宣城市'}]},

{name:'福建',
subCity:[{name:'请选择'},
{name:'福州市'},
{name:'厦门市'},
{name:'莆田市'},
{name:'三明市'},
{name:'泉州市'},
{name:'漳州市'},
{name:'南平市'},
{name:'龙岩市'},
{name:'宁德市'}]},

{name:'江西',
subCity:[{name:'请选择'},
{name:'南昌市'},
{name:'景德镇市'},
{name:'萍乡市'},
{name:'九江市'},
{name:'新余市'},
{name:'鹰潭市'},
{name:'赣州市'},
{name:'吉安市'},
{name:'宜春市'},
{name:'抚州市'},
{name:'上饶市'}]},

{name:'山东',
subCity:[{name:'请选择'},
{name:'济南市'},
{name:'青岛市'},
{name:'淄博市'},
{name:'枣庄市'},
{name:'东营市'},
{name:'烟台市'},
{name:'潍坊市'},
{name:'济宁市'},
{name:'泰安市'},
{name:'威海市'},
{name:'日照市'},
{name:'莱芜市'},
{name:'临沂市'},
{name:'德州市'},
{name:'聊城市'},
{name:'滨州市'},
{name:'菏泽市'}]},

{name:'河南',
subCity:[{name:'请选择'},
{name:'郑州市'},
{name:'开封市'},
{name:'洛阳市'},
{name:'平顶山市'},
{name:'安阳市'},
{name:'鹤壁市'},
{name:'新乡市'},
{name:'焦作市'},
{name:'濮阳市'},
{name:'许昌市'},
{name:'漯河市'},
{name:'三门峡市'},
{name:'南阳市'},
{name:'商丘市'},
{name:'信阳市'},
{name:'周口市'},
{name:'驻马店市'},
{name:'省直辖县级行政区划'}]},

{name:'湖北',
subCity:[{name:'请选择'},
{name:'武汉市'},
{name:'黄石市'},
{name:'十堰市'},
{name:'宜昌市'},
{name:'襄樊市'},
{name:'鄂州市'},
{name:'荆门市'},
{name:'孝感市'},
{name:'荆州市'},
{name:'黄冈市'},
{name:'咸宁市'},
{name:'随州市'},
{name:'恩施土家族苗族自治州'},
{name:'省直辖县级行政区划'}]},

{name:'湖南',
subCity:[{name:'请选择'},
{name:'长沙市'},
{name:'株洲市'},
{name:'湘潭市'},
{name:'衡阳市'},
{name:'邵阳市'},
{name:'岳阳市'},
{name:'常德市'},
{name:'张家界市'},
{name:'益阳市'},
{name:'郴州市'},
{name:'永州市'},
{name:'怀化市'},
{name:'娄底市'},
{name:'湘西土家族苗族自治州'}]},

{name:'广东',
subCity:[{name:'请选择'},
{name:'广州市'},
{name:'韶关市'},
{name:'深圳市'},
{name:'珠海市'},
{name:'汕头市'},
{name:'佛山市'},
{name:'江门市'},
{name:'湛江市'},
{name:'茂名市'},
{name:'肇庆市'},
{name:'惠州市'},
{name:'梅州市'},
{name:'汕尾市'},
{name:'河源市'},
{name:'阳江市'},
{name:'清远市'},
{name:'东莞市'},
{name:'中山市'},
{name:'潮州市'},
{name:'揭阳市'},
{name:'云浮市'}]},

{name:'广西',
subCity:[{name:'请选择'},
{name:'南宁市'},
{name:'柳州市'},
{name:'桂林市'},
{name:'梧州市'},
{name:'北海市'},
{name:'防城港市'},
{name:'钦州市'},
{name:'贵港市'},
{name:'玉林市'},
{name:'百色市'},
{name:'贺州市'},
{name:'河池市'},
{name:'来宾市'},
{name:'崇左市'}]},

{name:'海南',
subCity:[{name:'请选择'},
{name:'海口市'},
{name:'三亚市'},
{name:'省直辖县级行政区划'}]},

{name:'重庆',
subCity:[{name:'请选择'},
{name:'万州区'},
{name:'涪陵区'},
{name:'渝中区'},
{name:'大渡口区'},
{name:'江北区'},
{name:'沙坪坝区'},
{name:'九龙坡区'},
{name:'南岸区'},
{name:'北碚区'},
{name:'万盛区'},
{name:'双桥区'},
{name:'渝北区'},
{name:'巴南区'},
{name:'黔江区'},
{name:'长寿区'},
{name:'江津区'},
{name:'合川区'},
{name:'永川区'},
{name:'南川区'}]},

{name:'四川',
subCity:[{name:'请选择'},
{name:'成都市'},
{name:'自贡市'},
{name:'攀枝花市'},
{name:'泸州市'},
{name:'德阳市'},
{name:'绵阳市'},
{name:'广元市'},
{name:'遂宁市'},
{name:'内江市'},
{name:'乐山市'},
{name:'南充市'},
{name:'眉山市'},
{name:'宜宾市'},
{name:'广安市'},
{name:'达州市'},
{name:'雅安市'},
{name:'巴中市'},
{name:'资阳市'},
{name:'阿坝藏族羌族自治州'},
{name:'甘孜藏族自治州'},
{name:'凉山彝族自治州'}]},

{name:'贵州',
subCity:[{name:'请选择'},
{name:'贵阳市'},
{name:'六盘水市'},
{name:'遵义市'},
{name:'安顺市'},
{name:'铜仁地区'},
{name:'黔西南布依族苗族自治州'},
{name:'毕节地区'},
{name:'黔东南苗族侗族自治州'},
{name:'黔南布依族苗族自治州'}]},

{name:'云南',
subCity:[{name:'请选择'},
{name:'昆明市'},
{name:'曲靖市'},
{name:'玉溪市'},
{name:'保山市'},
{name:'昭通市'},
{name:'丽江市'},
{name:'普洱市'},
{name:'临沧市'},
{name:'楚雄彝族自治州'},
{name:'红河哈尼族彝族自治州'},
{name:'文山壮族苗族自治州'},
{name:'西双版纳傣族自治州'},
{name:'大理白族自治州'},
{name:'德宏傣族景颇族自治州'},
{name:'怒江傈僳族自治州'},
{name:'迪庆藏族自治州'}]},

{name:'西藏',
subCity:[{name:'请选择'},
{name:'拉萨市'},
{name:'昌都地区'},
{name:'山南地区'},
{name:'日喀则地区'},
{name:'那曲地区'},
{name:'阿里地区'},
{name:'林芝地区'}]},

{name:'陕西',
subCity:[{name:'请选择'},
{name:'西安市'},
{name:'铜川市'},
{name:'宝鸡市'},
{name:'咸阳市'},
{name:'渭南市'},
{name:'延安市'},
{name:'汉中市'},
{name:'榆林市'},
{name:'安康市'},
{name:'商洛市'}]},

{name:'甘肃',
subCity:[{name:'请选择'},
{name:'兰州市'},
{name:'嘉峪关市'},
{name:'金昌市'},
{name:'白银市'},
{name:'天水市'},
{name:'武威市'},
{name:'张掖市'},
{name:'平凉市'},
{name:'酒泉市'},
{name:'庆阳市'},
{name:'定西市'},
{name:'陇南市'},
{name:'临夏回族自治州'},
{name:'甘南藏族自治州'}]},

{name:'青海',
subCity:[{name:'请选择'},
{name:'西宁市'},
{name:'海东地区'},
{name:'海北藏族自治州'},
{name:'黄南藏族自治州'},
{name:'海南藏族自治州'},
{name:'果洛藏族自治州'},
{name:'玉树藏族自治州'},
{name:'海西蒙古族藏族自治州'}]},

{name:'宁夏',
subCity:[{name:'请选择'},
{name:'银川市'},
{name:'石嘴山市'},
{name:'吴忠市'},
{name:'固原市'},
{name:'中卫市'}]},

{name:'新疆',
subCity:[{name:'请选择'},
{name:'乌鲁木齐市'},
{name:'克拉玛依市'},
{name:'吐鲁番地区'},
{name:'哈密地区'},
{name:'昌吉回族自治州'},
{name:'博尔塔拉蒙古自治州'},
{name:'巴音郭楞蒙古自治州'},
{name:'阿克苏地区'},
{name:'克孜勒苏柯尔克孜自治州'},
{name:'喀什地区'},
{name:'和田地区'},
{name:'伊犁哈萨克自治州'},
{name:'塔城地区'},
{name:'阿勒泰地区'},
{name:'自治区直辖县级行政区划'}]}];


/**选择单位地址*/
function selectCompanyCity(value){
for(var i=0;i<city.length;i++){
if(city[i].name==value){
$("#areaCompany").replaceWith("<SELECT class=sel_100 id=areaCompany name=areaCompany></SELECT>");
var cityOptions="";
for(var j=0;j<city[i].subCity.length;j++){
cityOptions += "<option value=\""+city[i].subCity[j].name+"\">"+city[i].subCity[j].name+"</option>";
}
$("#areaCompany").append(cityOptions);
break;
}
}
}

/**js初始化-省信息*/
$(function(){
appendThree();
});



/**单位地址初始化*/
function appendThree(){
var provinceValue=$("#dwProvinceCompany").val();
var areaValue=$("#dwAreaCompany").val();
var provinceOptions="";
var cityOptions="";
if(provinceValue==""){provinceValue="请选择";areaValue="请先选择省份";}
if(areaValue==""){areaValue="请选择";}
for(var i=0;i<city.length;i++){
if(provinceValue==city[i].name){
provinceOptions += "<option value=\""+city[i].name+"\" selected>"+city[i].name+"</option>";
for(var j=0;j<city[i].subCity.length;j++){
if(areaValue==city[i].subCity[j].name){
cityOptions += "<option value=\""+city[i].subCity[j].name+"\" selected>"+city[i].subCity[j].name+"</option>";
}else{
cityOptions += "<option value=\""+city[i].subCity[j].name+"\">"+city[i].subCity[j].name+"</option>";
}
}
}else{
provinceOptions += "<option value=\""+city[i].name+"\">"+city[i].name+"</option>";
}
if(provinceValue==""){
for(var j=0;j<city[i].subCity.length;j++){
cityOptions += "<option value=\""+city[i].subCity[j].name+"\">"+city[i].subCity[j].name+"</option>";
}
}
}
$("#provinceCompany").append(provinceOptions);
$("#areaCompany").append(cityOptions);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值