js实现省市区三级联动（三个下拉框实现）html代码： 您选择的是： <input type="text" value="" id="addr-show"> <select id="prov" name="prov" onchange="showCity(this)">
<option>=请选择省份=</option>
</select>
<select id="city" onchange="showCountry(this)">
<option>=请选择城市=</option>
</select>
<!-- 区县选择 -->
<select id="country" onchange="selectCountry(this)">
<option>=请选择县区=</option>
</select>
<button type="button" class="btn" onClick="showAddr()">确定</button>
js代码：
$(function () {
var current_prov;
var current_city;
var current_country;
/* ⾃动加载省份列表 */
showPro();
});
function showPro(){
$(".btn").disabled = true;
var len = province.length;
for(var i = 0; i < len; i++) {
var provOpt = ateElement("option");
provOpt.innerText = province[i]['name'];
provOpt.value = i;
prov.appendChild(provOpt);
}
};
/
*根据所选的省份来显⽰城市列表*/
function showCity(obj) {
var val = obj.options[obj.selectedIndex].value;
current_prov = val;
if (val >=0) {
city.style.display = 'inline-block';
country.style.display = 'none';
} else {
city.style.display = 'none';
country.style.display = 'none';
}
if (val != null) {
city.length = 1;
if (province[val]) {
var cityLen = province[val]["city"].length;
}
for (var j = 0; j < cityLen; j++) {
var cityOpt = ateElement('option');
cityOpt.innerText = province[val]["city"][j].name;
cityOpt.value = j;
city.appendChild(cityOpt);
}
}
};
/*根据所选的城市来显⽰县区列表*/
/*根据所选的城市来显⽰县区列表*/
function showCountry(obj) {
var val = obj.options[obj.selectedIndex].value;
if (val >=0) {
country.style.display = 'inline-block';
} else {
country.style.display = 'none';
}
current_city = val;
if (val != null) {
country.length = 1;
if (province[current_prov]["city"][val]) {
var countryLen = province[current_prov]["city"][val].districtAndCounty.length;
}
if(countryLen == 0){
addrShow.value = province[current_prov].name + '-' + province[current_prov]["city"][val].name;
return;
}
for (var n = 0; n < countryLen; n++) {
var countryOpt = ateElement('option');
countryOpt.innerText = province[current_prov]["city"][val].districtAndCounty[n];
countryOpt.value = n;
country.appendChild(countryOpt);
}
}
};
function selectCountry(obj) {
current_country = obj.options[obj.selectedIndex].value;
$(".btn").disabled = false;
};
function showAddr() {
var ss = province[current_prov].name + "|" +
province[current_prov]['city'][current_city].name + "|" +
符跃兰province[current_prov]['city'][current_city]['districtAndCounty'][current_country];
$("#addr-show").val(ss);
}
css样式：
.btn:disabled {
background-color: grey;
}
select #city {
display: none;
}
select#country {
display: none;
}
外部js⽂件：<script src="static/js/province.js"></script>
var province = [
{
name: "北京市",
city: [
{
name: "北京市",
districtAndCounty: ["东城区", "西城区", "崇⽂区", "宣武区", "朝阳区", "丰台区", "⽯景⼭区", "海淀区", "门头沟区", "房⼭区", "通州区", "顺义区", "昌平区", "⼤兴区", "怀柔区", "平⾕区", "密云县", "延庆县", "延庆镇"]
}
]
]
},
{
name: "天津市",
city: [
{
name: "天津市",
districtAndCounty: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "⼤港区", "东丽区", "西青区", "津南区", "北⾠区", "武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"]
}
]
},
{
name: "上海市",
city: [
{
name: "上海市",
districtAndCounty: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹⼝区", "杨浦区", "闵⾏区", "宝⼭区?", "嘉定区", "浦东新区", "⾦⼭区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县", "城桥镇"]
}
]
},
{
name: "重庆市",
city: [
{
name: "重庆市",
机械振动与机械波districtAndCounty: ["渝中区", "⼤渡⼝区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛
区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "⼤⾜县", "荣昌县", "璧⼭县", "垫江县", "武隆县", "丰都县", "城⼝县", "梁平县", "开县", "巫溪县", "巫⼭县", "奉节县", "云阳县", "忠县", "⽯柱⼟家族⾃治县", "彭⽔苗族⼟家族⾃治县", "⾣阳⼟家族苗族⾃治县", "秀⼭⼟家族苗族⾃治县"] }
]
},
{
name: "河北省",
city: [
{
name: "⽯家庄市",
districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "⾟集市", "藁城市", "晋州市", "新乐市", "⿅泉市", "井陉县", "微⽔镇", "正定县", "正定镇", "栾城县", "栾城镇", "⾏唐县", "龙州镇", "灵寿县", "灵寿镇", "⾼⾢县", "⾼⾢镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "⽆极县", "⽆极镇", "平⼭县", "平⼭镇", "元⽒县", "槐阳镇", "赵县", "赵州镇"]
},
{
name: "张家⼝市",
districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家⼝市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿⿅县", "涿⿅镇", "⾚城县", "⾚城镇", "崇礼县", "西湾⼦镇"]
},
{
name: "承德市",
districtAndCounty: ["双桥区", "双滦区", "鹰⼿营⼦矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族⾃治县", "⼤阁镇", "宽城满族⾃治县", "宽城镇", "围场满族蒙古族⾃治县", "围场镇"]
},
{
name: "秦皇岛市",
districtAndCounty: ["海港区", "⼭海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族⾃治县", "青龙镇"]
},
{
name: "唐⼭市",
districtAndCounty: ["路北区", "路南区", "古冶区", "开平区", "丰润区", "丰南区", "遵化市", "迁安市", "滦
县", "滦州镇", "滦南县", "倴城镇", "乐亭县", "乐亭镇", "迁西县", "兴城镇", "⽟⽥县", "⽟⽥镇", "唐海县", "唐海镇"]
},
{
name: "廊坊市",
districtAndCounty: ["安次区", "⼴阳区", "霸州市", "三河市", "固安县", "固安镇", "永清县", "永清镇", "⾹河县", "淑阳镇", "⼤城县", "平舒镇", "⽂安县", "⽂安
districtAndCounty: ["安次区", "⼴阳区", "霸州市", "三河市", "固安县", "固安镇", "永清县", "永清镇", "⾹河县", "淑阳镇", "⼤城县", "平舒镇", "⽂安县", "⽂安镇", "⼤⼚回族⾃治县", "⼤⼚镇"]
},
{
name: "保定市",
districtAndCounty: ["新市区", "北市区", "南市区", "定州市", "涿州市", "安国市", "⾼碑店市", "满城县", "满城镇", "清苑县", "清苑镇", "易县", "易州镇", "徐⽔县", "安肃镇", "涞源县", "涞源镇", "定兴县", "定兴镇", "顺平县", "蒲阳镇", "唐县", "仁厚镇", "望都县", "望都镇", "涞⽔县", "涞⽔镇", "⾼阳县", "⾼阳镇", "安新县", "安新镇", "雄县", "雄州镇", "容城县", "容城镇", "曲阳县", "恒州镇", "⾩平县", "⾩平镇", "博野县", "博陵镇", "蠡县", "蠡吾镇"]
},
{
name: "衡⽔市",
districtAndCounty: ["桃城区", "冀州市", "深州市", "枣强县", "枣强镇", "武⾢县", "武⾢镇", "武强县", "武强镇", "饶阳县", "饶阳镇", "安平县", "安平镇", "故城县", "郑⼝镇", "景县", "景州镇", "⾩城县", "⾩城镇"]
},
{
name: "沧州市",
districtAndCounty: ["运河区", "新华区", "泊头市", "任丘市", "黄骅市", "河间市", "沧县", "沧州市新华区", "青县", "清州镇", "东光县", "东光镇", "海兴县", "苏基镇", "盐⼭县", "盐⼭镇", "肃宁县", "肃宁镇", "南⽪县", "南⽪镇", "吴桥县", "桑园镇", "献县", "乐寿镇", "孟村回族⾃治县", "孟村镇"]
},
{
name: "邢台市",
districtAndCounty: ["桥东区", "桥西区", "南宫市", "沙河市", "邢台县", "邢台市桥东区", "临城县", "临城镇", "内丘县", "内丘镇", "柏乡县", "柏乡镇", "隆尧县", "隆尧镇", "任县", "任城镇", "南和县", "和阳镇", "宁晋县", "凤凰镇", "巨⿅县", "巨⿅镇", "新河县", "新河镇", "⼴宗县", "⼴宗镇", "平乡县", "丰州镇", "威县", "洺州镇", "清河县", "葛仙庄镇", "临西县", "临西镇"]
},
{
name: "邯郸市",
districtAndCounty: ["丛台区", "邯⼭区", "复兴区", "峰峰矿区", "武安市", "邯郸县", "南堡乡东⼩屯村", "临漳县", "临漳镇", "成安县", "成安镇", "⼤名县", "⼤名镇", "涉县", "涉城镇", "磁县", "磁州镇", "肥乡县", "肥乡镇", "永年县", "临洺关镇", "邱县", "新马头镇", "鸡泽县", "鸡泽镇", "⼴平县", "⼴平镇", "馆陶县", "馆陶镇", "魏县", "魏城镇", "曲周县", "曲周镇"]
}
竹子为什么长的那么快]
},
{
name: "⼭西省",
city: [
{
name: "太原市",
districtAndCounty: ["杏花岭区", "⼩店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县", "清源镇", "阳曲县", "黄寨镇", "娄烦县", "娄烦镇"] },
{
name: "朔州市",
districtAndCounty: ["朔城区", "平鲁区", "⼭阴县", "岱岳乡", "应县", "⾦城镇", "右⽟县", "新城镇", "怀仁县", "云中镇"]
},
{
name: "⼤同市",
districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳⾼县", "龙泉镇", "天镇县", "⽟泉镇", "⼴灵县", "壶泉镇", "灵丘县", "武灵镇", "浑源县", "永安镇", "左云县", "云兴镇", "⼤同县", "西坪镇"]
},
{
name: "阳泉市",硅酸铝纤维毡
districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠⼭镇", "盂县", "秀⽔镇"]
},
{
name: "长治市",
districtAndCounty: ["城区", "郊区", "潞城市", "长治县", "韩店镇", "襄垣县", "古韩镇", "屯留县", "麟绛镇", "平顺县", "青⽺镇", "黎城县", "黎侯镇", "壶关县", "龙泉镇", "长⼦县", "丹朱镇", "武乡县", "丰州镇", "沁县", "定昌镇", "沁源县", "沁河镇"]
},
{
name: "晋城市",
districtAndCounty: ["城区", "⾼平市", "泽州县", "南村镇", "沁⽔县", "龙港镇", "阳城县", "凤城镇", "陵川县", "崇⽂镇"]
},
{
name: "忻州市",
districtAndCounty: ["忻府区", "原平市", "定襄县", "晋昌镇", "五台县", "台城镇", "代县", "上馆镇", "繁峙县", "繁城镇", "宁武县", "凤凰镇", "静乐县", "鹅城镇", "神池县", "龙泉镇", "五寨县", "砚城镇", "岢岚县", "岚漪镇", "河曲县", "⽂笔镇", "保德县", "东关镇", "偏关县", "新关镇"]
"神池县", "龙泉镇", "五寨县", "砚城镇", "岢岚县", "岚漪镇", "河曲县", "⽂笔镇", "保德县", "东关镇", "偏关县", "新关镇"]
},
{
name: "晋中市",
districtAndCounty: ["榆次区", "介休市", "榆社县", "箕城镇", "左权县", "辽阳镇", "和顺县", "义兴镇", "昔阳县", "乐平镇", "寿阳县", "朝阳镇", "太⾕县", "明星镇", "祁县", "昭余镇", "平遥县", "古陶镇", "灵⽯县", "翠峰镇"]
},
{
name: "临汾市",
欧债危机论文
districtAndCounty: ["尧都区", "侯马市", "霍州市", "曲沃县", "乐昌镇", "翼城县", "唐兴镇", "襄汾县", "新城镇", "洪洞县", "⼤槐树镇", "古县", "岳阳镇", "安泽县", "府城镇", "浮⼭县", "天坛镇", "吉县", "吉昌镇", "乡宁县", "昌宁镇", "蒲县", "蒲城镇", "⼤宁县", "昕⽔镇", "永和县", "芝河镇", "隰县", "龙泉镇", "汾西县", "永安镇"]
},
{
name: "吕梁市",
districtAndCounty: ["离⽯区", "孝义市", "汾阳市", "⽂⽔县", "凤城镇", "中阳县", "宁乡镇", "兴县", "蔚汾镇", "临县", "临泉镇", "⽅⼭县", "圪洞镇", "柳林县", "柳林镇", "岚县", "东村镇", "交⼝县", "⽔头镇", "交城县", "天宁镇", "⽯楼县", "灵泉镇"]
},
{
name: "运城市",
districtAndCounty: ["盐湖区", "永济市", "河津市", "芮城县", "古魏镇", "临猗县", "猗⽒镇", "万荣县", "解店镇", "新绛县", "龙兴镇", "稷⼭县", "稷峰镇", "闻喜县", "桐城镇", "夏县", "瑶峰镇", "绛县", "古绛镇", "平陆县", "圣⼈涧镇", "垣曲县", "新城镇"]
}
]
},
{
name: "内蒙古",
city: [
{
name: "呼和浩特市",
districtAndCounty: ["回民区", "新城区", "⽟泉区", "赛罕区", "托克托县", "双河镇", "武川县", "可可以⼒更镇", "和林格尔县", "城关镇", "清⽔河县", "城关镇", "⼟默特左旗", "察素齐镇"]
},
{
name: "包头市",
districtAndCounty: ["昆都仑区", "东河区", "青⼭区", "⽯拐区", "⽩云矿区", "九原区", "固阳县", "⾦⼭镇", "⼟默特右旗", "萨拉齐镇", "达尔罕茂明安联合旗", "百灵庙镇"]
},
{
name: "乌海市",
districtAndCounty: ["海勃湾区", "海南区", "乌达区"]
},
{
name: "⾚峰市",
districtAndCounty: ["红⼭区", "元宝⼭区", "松⼭区", "宁城县", "天义镇", "林西县", "林西镇", "阿鲁科尔沁旗", "天⼭镇", "巴林左旗", "林东镇", "巴林右旗", "⼤板镇", "克什克腾旗", "经棚镇", "翁⽜特旗", "乌丹镇", "喀喇沁旗", "锦⼭镇", "敖汉旗", "新惠镇"]
},
{
name: "通辽市",
wap模拟器districtAndCounty: ["科尔沁区", "霍林郭勒市", "开鲁县", "开鲁镇", "库伦旗", "库伦镇", "奈曼旗", "⼤沁他拉镇", "扎鲁特旗", "鲁北镇", "科尔沁左翼中旗", "保康镇", "科尔沁左翼后旗", "⽢旗卡镇"]
},
{
name: "呼伦贝尔市",
districtAndCounty: ["海拉尔区", "满洲⾥市", "扎兰屯市", "⽛克⽯市", "根河市", "额尔古纳市", "阿荣旗", "那吉镇", "新巴尔虎右旗", "阿拉坦额莫勒镇", "新巴尔虎左旗", "阿穆古郎镇", "陈巴尔虎旗", "巴彦库仁镇", "鄂伦春⾃治旗", "阿⾥河镇", "鄂温克族⾃治旗", "巴彦托海镇", "莫⼒达⽡达斡尔族⾃治旗", "尼尔基镇"]
},
{
name: "鄂尔多斯市",
districtAndCounty: ["东胜区", "达拉特旗", "树林召镇", "准格尔旗", "薛家湾镇", "鄂托克前旗", "敖勒召其镇", "鄂托克旗", "乌兰镇", "杭锦旗", "锡尼镇", "乌审旗", "嘎鲁图镇", "伊⾦霍洛旗", "阿勒腾席热镇"]
},
{
name: "乌兰察布市",
districtAndCounty: ["集宁区", "丰镇市", "卓资县", "卓资⼭镇", "化德县", "长顺镇", "商都县", "商都镇", "兴和县", "城关镇", "凉城县", "岱海镇", "察哈尔右翼前旗", "⼟贵乌拉镇", "察哈尔右翼中旗", "科布尔镇", "察哈尔右翼后旗", "⽩⾳察⼲镇", "四⼦王旗", "乌兰花镇"]
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议