——城市级联

最新推荐文章于 2021-12-01 22:54:19 发布

阿超儿

最新推荐文章于 2021-12-01 22:54:19 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/qq_41299071/article/details/79080027

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市级联</title>
</head>
<body>

<select name="" id="she">
<option value="">--请选择省--</option>

</select>


<select name="" id="shi">
<option value="">--请选择市--</option>
</select>


<select name="" id="xian">
<option value="">--请选择县--</option>
</select>

<script src="./jquery-1.8.3.min.js"></script>
<script>
// 定义数据
var pro={}
pro['河北省']=['石家庄','保定','唐山']
pro['河南省']=['郑州','洛阳']
pro['山东省']=['济南','青岛']
pro['山西省']=['太原','大同']

var city={}
city['石家庄']=['石1','石2','石3','石4']
city['保定']=['保1','保2','保2']
city['唐山']=['唐1','唐2','唐3']
city['郑州']=['金水区','二七区','中原区','管城区']
city['洛阳']=['洛1','洛1','洛1','洛1']
city['济南']=['济1','济1','济1','济1']
city['青岛']=['市南','市北','崂山','黄岛']
city['太原']=['柏林去','老板区']
city['大同']=['同1','同2']

var str='<option value="">--请选择省--</option>'
// 便利省份
for(var i in pro){
str+='<option value="'+i+'">--'+i+'--</option>'
// console.log(str);
}

$('#she').html(str);

$('#she').change(function(){
var str1='<option value="">--请选择市--</option>'
// this代表当前选中的选项
var name=$(this).val();
// console.log(name);
// 获取val对应的值（值是数组）
var name1=pro[name]
// console.log(name1)
// 便利获取到的数组
for(var i in name1){
// console.log(i)
str1+='<option value="'+name1[i]+'">--'+name1[i]+'--</option>';
// console.log(str1);
}
// 把拼接的字符串写到市里面
$('#shi').html(str1);
})

// 给市添加change事件
$('#shi').change(function(){
// 定义字符串
var str2='<option value="">--请选择县--</option>'
// 获取当前选中的value值
var name=$(this).val();
// console.log(name);
var name1=city[name];
// console.log(name1);
// 便利拿到的对应的数组
for(var i in name1){
str2+='<option value="'+i+'">--'+name1[i]+'--</option>'
}
$('#xian').html(str2);
})

</script>
</body>
</html>