码迷,mamicode.com
首页 > Web开发 > 详细

jquery三级联动

时间:2019-01-17 11:40:58      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:char   app   不能   scale   级联   pat   var   scala   sel   

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery手写三级联动</title>
</head>
<body>
<select name="" id="selProvince">
<option value="">----请选择----</option>
</select>
<select name="" id="selCity">
<option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
<option value="">----请选择----</option>
</select>
</body>
<script src="./jquery/jquery.2.0.0.js"></script>
<script>
var iNum1;
var iNum2;
var aProvince = [‘1‘, ‘2‘, ‘3‘];
var aCity = [[‘11‘, ‘12‘, ‘13‘], [‘21‘, ‘22‘, ‘23‘], [‘31‘, ‘32‘, ‘33‘]];
var aCountry = [[[‘111‘, ‘112‘], [‘121‘, ‘122‘], [‘131‘, ‘132‘]], [[‘211‘, ‘212‘], [‘221‘, ‘222‘], [‘231‘, ‘232‘]], [[‘311‘, ‘312‘], [‘321‘, ‘322‘], [‘331‘, ‘332‘]]];

$(function () {
for (var i = 0; i < aProvince.length; i++) {
$(‘#selProvince‘).append(‘<option>‘ + aProvince[i] + ‘</option>‘);
}
;

$(‘#selProvince‘).change(function () {
//清除之前的选择 这里不能用find
$(‘#selCity‘).children().not(‘:eq(0)‘).remove();
//选择自己省对应的市
iNum1 = $(this).find(‘option:selected‘).index();
//去掉第一个请选择
aaCity = aCity[iNum1 - 1];
for (var j = 0; j < aaCity.length; j++) {
$(‘#selCity‘).append(‘<option>‘ + aaCity[j] + ‘</option>‘)
}
});

$(‘#selCity‘).change(function () {
//清除之前的选择
$(‘#selCountry‘).children().not(‘:eq(0)‘).remove();
//选择自己市对应的县
iNum2 = $(this).find(‘option:selected‘).index();
var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
for (var n = 0; n < aaCountry.length; n++) {
$(‘#selCountry‘).append(‘<option>‘ + aaCountry[n] + ‘</option>‘)
}
});
})
</script>
</html>

jquery三级联动

标签:char   app   不能   scale   级联   pat   var   scala   sel   

原文地址:https://www.cnblogs.com/shenbo666/p/10281194.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!