下拉框选择省市区

html:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo2.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo2.js"></script>
</head>
<body>
<select id="selProvince">
<option>--请选择--</option>

</select>
<select id="selCity">
<option>--请选择--</option>
</select>
<select id="selCounty">
<option>--请选择--</option>
</select>
</body>
</html>

 

 

css:

 

body {
}

 

js:

 

/// <reference path="jquery-1.10.2.min.js" />
var aProvince = ["河北省", "山西省", "湖北省"];
//aProvince[0]; 河北省
//aProvince[1]; 山西省
var aCity = [["石家庄市", "张家口市", "承德市", "秦皇岛市"], ["太原市", "朔州市", "大同市", "阳泉市"], ["武汉市", "孝感市", "宜昌市", "襄阳市"]];
var aCountry = [[["无极县", "赵县", "栾城县"], ["沽源县", "尚义县", "阳原县"], ["平泉县", "滦平县", "隆化县"], ["抚宁县", "卢龙县", "昌黎县"]],
[["清徐县", "阳曲县", "娄烦县"], ["山阴县", "应县", "右玉县"], ["左云县", "阳高县", "天镇县"], ["盂县", "平定县", "矿区"]], [["武昌区", "洪山区", "东湖新区"], ["云梦县", "大悟县", "应城市"], ["秭归县", "远安县", "枝江市"], ["枣阳市", "老河口市", "谷城县"]]];
var num1 = 0;
var num2 = 0;
$(function () {
//循环出省
for (var i = 0; i < aProvince.length; i++) {
$("#selProvince").append(" <option>" + aProvince[i] + "</option>");
}
$("#selProvince").change(function () {
$("#selCity").children("option").not(":eq(0)").remove();//去掉叠加 清空 但不包括 请选择
$("#selCounty").children("option").not(":eq(0)").remove();//把请选择留着 其余的移除掉
num1 = parseInt($(this).children("option:selected").index());//获取索引值
if (num1 > 0) {
var ac = aCity[num1 - 1];//去掉请选择
for (var i = 0; i < ac.length; i++) {
$("#selCity").append(" <option>" + ac[i] + "</option>");
}
}
});

$("#selCity").change(function () {
$("#selCounty").children("option").not(":eq(0)").remove();//把请选择留着 其余的移除掉
num2 = parseInt($(this).children("option:selected").index());//获取索引值
if (num2 > 0) {
var ac = aCountry[num1 - 1][num2 - 1];//去掉请选择
for (var j = 0; j < ac.length; j++) {
$("#selCounty").append(" <option>" + ac[j] + "</option>");
}
}
});
});

转载于:https://www.cnblogs.com/sunshinezjb/p/8550303.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值