web 端 省市区三级联动选择框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动选择框</title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style>
select{
font-size: 15px;padding: 5px 5px}
</style>
</head>
<body>
<div>
<select id="province">
<option value="" hidden>请选择省份</option>
</select>
<select id="city">
<option value="" hidden>请选择城市</option>
</select>
<select id="district">
<option value="" hidden>请选择区县</option>
</select>
<button>提交</button>
</div>
</body>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
var province = $("#province");
var city = $("#city");
var district = $("#district");
//初始化省份下拉选择框选项
$(function(){
//遍历对象,data为data.js中的对象
data.forEach(function(value,index){
var provinceName = value.name;//省份名
province.append("<option value='"+index+"'>"+provinceName+"</option>");
});
});
//省份下拉框切换事件,加载城市下拉框值
province.change(function(){
//先清除城市区县两个下拉框的选项
$("#city option:not(:first)").remove();
$("#district option:not(:first)").remove();
var cityList = data[province.val()].city;
cityList.forEach(function(value,index){
var cityName = value.name;//城市名
city.append("<option value='"+index+"'>"+cityName+"</option>");
});
});
//城市下拉框切换事件,加载区县下拉框值
city.change(function(){
$("#district option:not(:first)").remove();
var cityList = data[province.val()].city;
var districtList = cityList[city.val()].area;
districtList.forEach(function(value,index){
district.append("<option value='"+index+"'>"+value+"</option>");
});
});
$("button").click(function(){
var provinceVal = province.val();
var cityVal = city.val();
var districtVal = district.val();
if(provinceVal==''){
alert("请选择省份");return false;}
if(cityVal==''){
alert("请选择城市");return false;}
if(districtVal==''){
alert("请选择区县");return false;}
//获取省市区选中的值的文本
var pName = $("#province option:selected").text();
var cName = $("#city option:selected").text();
var dName = $("#district option:selected").text();
alert("您选择的是:"+pName+cName+dName);
});
</script>
</html>
data.js 城市的文件，目前并不全
```javascript
var data = [
{
"name": "北京市",
"city": [
{
"name": "北京市",
"area": [
"东城区",
"西城区",
"崇文区",
"宣武区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"平谷区",
"怀柔区",
"密云县",
"延庆县"
]
}
]
},
{
"name": "天津市",
"city": [
{
"name": "天津市",
"area": [
"和平区",
"河东区",
"河西区",
"南开区",
"河北区",
"红桥区",
"塘沽区",
"汉沽区",
"大港区",
"东丽区",
"西青区",
"津南区",
"北辰区",
"武清区",
"宝坻区",
"宁河县",
"静海县",
"蓟 县"
]
}
]
},
{
"name": "河北省",
"city": [
{
"name": "石家庄市",
"area": [
"长安区",
"桥东区",
"桥西区",
"新华区",
"郊 区",
"井陉矿区",
"井陉县",
"正定县",
"栾城县",
"行唐县",
"灵寿县",
"高邑县",
"深泽县",
"赞皇县",
"无极县",
"平山县",
"元氏县",
"赵 县",
"辛集市",
"藁",
"晋州市",
"新乐市",
"鹿泉市"
]
},
{
"name": "唐山市",
"area": [
"路南区",
"路北区",
"古冶区",
"开平区",
"新 区",
"丰润县",
"滦 县",
"滦南县",
"乐亭县",
"迁西县",
"玉田县",
"唐海县",
"遵化市",
"丰南市",
"迁安市"
]
},
{
"name": "秦皇岛市",
"area": [
"海港区",
"山海关区",
"北戴河区",
"青龙满族自治县",
"昌黎县",
"抚宁县",
"卢龙县"
]
},
{
"name": "邯郸市",
"area": [
"邯山区",
"丛台区",
"复兴区",
"峰峰矿区",
"邯郸县",
"临漳县",
"成安县",
"大名县",
"涉 县",
"磁 县",
"肥乡县",
"永年县",
"邱 县",
"鸡泽县",
"广平县",
"馆陶县",
"魏 县",
"曲周县",
"武安市"
]
},
{
"name": "邢台市",
"area": [
"桥东区",
"桥西区",
"邢台县",
"临城县",
"内丘县",
"柏乡县",
"隆尧县",
"任 县",
"南和县",
"宁晋县",
"巨鹿县",
"新河县",
"广宗县",
"平乡县",
"威 县",
"清河县",
"临西县",
"南宫市",
"沙河市"
]
},
{
"name": "保定市",
"area": [
"新市区",
"北市区",
"南市区",
"满城县",
"清苑县",
"涞水县",
"阜平县",
"徐水县",
"定兴县",
"唐 县",
"高阳县",
"容城县",
"涞源县",
"望都县",
"安新县",
"易 县",
"曲阳县",
"蠡 县",
"顺平县",
"博野",
"雄县",
"涿州市",
"定州市",
"安国市",
"高碑店市"
]
},
{
"name": "张家口",
"area": [
"桥东区",
"桥西区",
"宣化区",
"下花园区",
"宣化县",
"张北县",
"康保县",
"沽源县",
"尚义县",
"蔚 县",
"阳原县",
"怀安县",
"万全县",
"怀来县",
"涿鹿县",
"赤城县",
"崇礼县"
]
},
{
"name": "承德市",
"area": [
"双桥区",
"双滦区",
"鹰手营子矿区",
"承德县",
"兴隆县",
"平泉县",
"滦平县",
"隆化县",
"丰宁满族自治县",
"宽城满族自治县",
"围场满族蒙古族自治县"
]
},
{
"name": "沧州市",
"area": [
"新华区",
"运河区",
"沧 县",
"青 县",
"东光县",
"海兴县",
"盐山县",
"肃宁县",
"南皮县",
"吴桥县",
"献 县",
"孟村回族自治县",
"泊头市",
"任丘市",
"黄骅市",
"河间市"
]
},
{
"name": "廊坊市",
"area": [
"安次区",
"固安县",
"永清县",
"香河县",
"大城县",
"文安县",
"大厂回族自治县",
"霸州市",
"三河市"
]
},
{
"name": "衡水市",
"area": [
"桃城区",
"枣强县",
"武邑县",
"武强县",
"饶阳县",
"安平县",
"故城县",
"景 县",
"阜城县",
"冀州市",
"深州市"
]
}
]
},
{
"name": "山西省",
"city": [
{
"name": "太原市",
"area": [
"小店区",
"迎泽区",
"杏花岭区",
"尖草坪区",
"万柏林区",
"晋源区",
"清徐县",
"阳曲县",
"娄烦县",
"古交市"
]
},
{
"name": "大同市",
"area": [
"城 区",
"矿 区",
"南郊区",
"新荣区",
"阳高县",
"天镇县",
"广灵县",
"灵丘县",
"浑源县",
"左云县",
"大同县"
]
},
{
"name": "阳泉市",
"area": [
"城 区",
"矿 区",
"郊 区",
"平定县",
"盂 县"
]
},
{
"name": "长治市",
"area": [
"城 区",
"郊 区",
"长治县",
"襄垣县",
"屯留县",
"平顺县",
"黎城县",
"壶关县",
"长子县",
"武乡县",
"沁 县",
"沁源县",
"潞城市"
]
},
{
"name": "晋城市",
"area": [
"城 区",
"沁水县",
"阳城县",
"陵川县",
"泽州县",
"高平市"
]
},
{
"name": "朔州市",
"area": [
"朔城区",
"平鲁区",
"山阴县",
"应 县",
"右玉县",
"怀仁县"
]
},
{
"name": "忻州市",
"area": [
"忻府区",
"原平市",
"定襄县",
"五台县",
"代 县",
"繁峙县",
"宁武县",
"静乐县",
"神池县",
"五寨县",
"岢岚县",
"河曲县",
"保德县",
"偏关县"
]
},
{
"name": "吕梁市",
"area": [
"离石区",
"孝义市",
"汾阳市",
"文水县",
"交城县",
"兴 县",
"临 县",
"柳林县",
"石楼县",
"岚 县",
"方山县",
"中阳县",
"交口县"
]
},
{
"name": "晋中市",
"area": [
"榆次市",
"介休市",
"榆社县",
"左权县",
"和顺县",
"昔阳县",
"寿阳县",
"太谷县",
"祁 县",
"平遥县",
"灵石县"
]
},
{
"name": "临汾市",
"area": [
"临汾市",
"侯马市",
"霍州市",
"曲沃县",
"翼城县",
"襄汾县",
"洪洞县",
"古 县",
"安泽县",
"浮山县",
"吉 县",
"乡宁县",
"蒲 县",
"大宁县",
"永和县",
"隰 县",
"汾西县"
]
},
{
"name": "运城市",
"area": [
"运城市",
"永济市",
"河津市",
"芮城县",
"临猗县",
"万荣县",
"新绛县",
"稷山县",
"闻喜县",
"夏 县",
"绛 县",
"平陆县",
"垣曲县"
]
}
]
},
{
"name": "内蒙古",
"city": [
{
"name": "呼和浩特市",
"area": [
"新城区",
"回民区",
"玉泉区",
"郊 区",
"土默特左旗",
"托克托县",
"和林格尔县",
"清水河县",
"武川县"
]
},
{
"name": "包头市",
"area": [
"东河区",
"昆都伦区",
"青山区",
"石拐矿区",
"白云矿区",
"郊 区",
"土默特右旗",
"固阳县",
"达尔罕茂明安联合旗"
]
},
{
"name": "乌海市",
"area": [
"海勃湾区",
"海南区",
"乌达区"
]
},
{
"name": "赤峰市",
"area": [
"红山区",
"元宝山区",
"松山区",
"阿鲁科尔沁旗",
"巴林左旗",
"巴林右旗",
"林西县",
"克什克腾旗",
"翁牛特旗",
"喀喇沁旗",
"宁城县",
"敖汉旗"
]
},
{
"name": "呼伦贝尔市",
"area": [
"海拉尔市",
"满洲里市",
"扎兰屯市",
"牙克石市",
"根河市",
"额尔古纳市",
"阿荣旗",
"莫力达瓦达斡尔族自治旗",
"鄂伦春自治旗",
"鄂温克族自治旗",
"新巴尔虎右旗",
"新巴尔虎左旗",
"陈巴尔虎旗"
]
},
{
"name": "兴安盟",
"area": [
"乌兰浩特市",
"阿尔山市",
"科尔沁右翼前旗",
"科尔沁右翼中旗",
"扎赉特旗",
"突泉县"
]
},
{
"name": "通辽市",
"area": [
"科尔沁区",
"霍林郭勒市",
"科尔沁左翼中旗",
"科尔沁左翼后旗",
"开鲁县",
"库伦旗",
"奈曼旗",
"扎鲁特旗"
]
},
{
"name": "锡林郭勒盟",
"area": [
"二连浩特市",
"锡林浩特市",
"阿巴嘎旗",
"苏尼特左旗",
"苏尼特右旗",
"东乌珠穆沁旗",
"西乌珠穆沁旗",
"太仆寺旗",
"镶黄旗",
"正镶白旗",
"正蓝旗",
"多伦县"
]
},
{
"name": "乌兰察布盟",
"area": [
"集宁市",
"丰镇市",
"卓资县",
"化德县",
"商都县",
"兴和县",
"凉城县",
"察哈尔右翼前旗",
"察哈尔右翼中旗",
"察哈尔右翼后旗",
"四子王旗"
]
},
{
"name": "伊克昭盟",
"area": [
"东胜市",
"达拉特旗",
"准格尔旗",
"鄂托克前旗",
"鄂托克旗",
"杭锦旗",
"乌审旗",
"伊金霍洛旗"
]
},
{
"name": "巴彦淖尔盟",
"area": [
"临河市",
"五原县",
"磴口县",
"乌拉特前旗",
"乌拉特中旗",
"乌拉特后旗",
"杭锦后旗"
]
},
{
"name": "阿拉善盟",
"area": [
"阿拉善左旗",
"阿拉善右旗",
"额济纳旗"
]
}
]
},
{
"name": "辽宁省",
"city": [
{
"name": "沈阳市",
"area": [
"沈河区",
"皇姑区",
"和平区",
"大东区",
"铁西区",
"苏家屯区",
"东陵区",
"于洪区",
"新民市",
"法库县",
"辽中县",
"康平县",
"新城子区",
"其他"
]
},
{
"name": "大连市",
"area": [
"西岗区",
"中山区",
"沙河口区",
"甘井子区",
"旅顺口区",
"金州区",
"瓦房店市",
"普兰店市",
"庄河市",
"长海县",
"其他"
]
},
{
"name": "鞍山市",
"area": [
"铁东区",
"铁西区",
"立山区",
"千山区",
"海城市",
"台安县",
"岫岩满族自治县",
"其他"
]
},
{
"name": "抚顺市",
"area": [
"顺城区",
"新抚区",
"东洲区",
"望花区",
"抚顺县",
"清原满族自治县",
"新宾满族自治县",
"其他"
]
},
{
"name": "本溪市",
"area": [
"平山区",
"明山区",
"溪湖区",
"南芬区",
"本溪满族自治县",
"桓仁满族自治县",
"其他"
]
},
{
"name": "丹东市",
"area": [
"振兴区",
"元宝区",
"振安区",
"东港市",
"凤城市",
"宽甸满族自治县",
"其他"
]
},
{
"name": "锦州市",
"area": [
"太和区",
"古塔区",
"凌河区",
"凌海市",
"黑山县",
"义县",
"北宁市",
"其他"
]
},
{
"name": "营口市",
"area": [
"站前区",
"西市区",
"鲅鱼圈区",
"老边区",
"大石桥市",
"盖州市",
"其他"
]
},
{
"name": "阜新市",
"area": [
"海州区",
"新邱区",
"太平区",
"清河门区",
"细河区",
"彰武县",
"阜新蒙古族自治县",
"其他"
]
},
{
"name": "辽阳市",
"area": [
"白塔区",
"文圣区",
"宏伟区",
"太子河区",
"弓长岭区",
"灯塔市",
"辽阳县",
"其他"
]
},
{
"name": "盘锦",
"area": [
"双台子区",
"兴隆台区",
"盘山县",
"大洼县",
"其他"
]
},
{
"name": "铁岭市",
"area": [
"银州区",
"清河区",
"调兵山市",
"开原市",
"铁岭县",
"昌图县",
"西丰县",
"其他"
]
},
{
"name": "朝阳市",
"area": [
"双塔区",
"龙城区",
"凌源市",
"北票市",
"朝阳县",
"建平县",
"喀喇沁左翼蒙古族自治县",
"其他"
]
},
{
"name": "葫芦岛市",
"area": [
"龙港区",
"南票区",
"连山区",
"兴城市",
"绥中县",
"建昌县",
"其他"
]
},
{
"name": "其他",
"area": [
"其他"
]
}
]
},
{
"name": "吉林省",
"city": [
{
"name": "长春市",
"area": [
"朝阳区",
"宽城区",
"二道区",
"南关区",
"绿园区",
"双阳区",
"九台市",
"榆树市",
"德惠市",
"农安县",
"其他"
]
},
{
"name": "吉林市",
"area": [
"船营区",
"昌邑区",
"龙潭区",
"丰满区",
"舒兰市",
"桦甸市",
"蛟河市",
"磐石市",
"永吉县",
"其他"
]
},
{
"name": "四平",
"area": [
"铁西区",
"铁东区",
"公主岭市",
"双辽市",
"梨树县",
"伊通满族自治县",
"其他"
]
},
{
"name": "辽源市",
"area": [
"龙山区",
"西安区",
"东辽县",
"东丰县",
"其他"
]
},
{
"name": "通化市",
"area": [
"东昌区",
"二道江区",
"梅河口市",
"集安市",
"通化县",
"辉南县",
"柳河县",
"其他"
]
},
{
最低0.47元/天 解锁文章
扫一扫
1229
到【灌水乐园】发言
