城市选择作为web常用功能,网上插件多多,其原理大相径庭。
以下讲解简单的省份城市二级联动实现:
直接上代码,会点前端的都能看懂,安排!
html部分:
<!--省份选项列表-->
<select class="provinceTarget inputEle selectTag" id="province">
<option data-index="-1" value="省份">省份</option>
</select>
<!--城市选项列表-->
<select class="cityTarget inputEle selectTag" id="city">
<option data-index="-1" value="城市">城市</option>
</select>
js部分:
/*json数据*/ var jsonList=[ { "provice":"北京市","city":["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]}, { "provice":"天津市","city":["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区", "静海区", "蓟州区"]}, { "provice":"河北省","city":["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"]}, { "provice":"山西省","city":["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"]}, { "provice":"内蒙古自治区","city":["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟", "锡林郭勒盟", "阿拉善盟"]}, { "provice":"辽宁省","city":["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市", "锦州市", "营口市", "阜新市", "辽阳市", "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"]}, { "provice":"吉林省","city":["长春市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "松原市", "白城市", "延边朝鲜族自治州"]}, { "provice":"黑龙江省","city":["哈尔滨市", "齐齐哈尔市", "鸡西市", "鹤岗市", "双鸭山市", "大庆市", "伊春市", "佳木斯市", "七台河市", "牡丹江市", "黑河市", "绥化市", "大兴安岭地区"]}, { "provice":"上海市","city":["黄浦区", "徐汇区", "长宁区", "静安区", "普