省市二级联动
程序员文章站
2022-03-22 10:12:51
<!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">
<title>用户中心</title>
<style>
</style>
<script src="./js/jquery-3.5.1.js"></script>
</head>
<body>
<div>
<select name="" id=""></select>省
<select name="" id=""></select>市
</div>
<script >
var data={
广东省:['东莞','广州','云浮'],
江西省:['赣州','南昌','临川']
};
(function(){
$.each(data,function(key,e){
$('select:eq(0)').append(
$('<option></option>')
.val(key)
.text(key)
)
})
$.each(data['广东省'],function(i,e){
$('select:eq(1)').append(
$('<option></option>')
.val(e)
.text(e)
)
})
}())
$('select:eq(0)').on('change',function(event){
var prop=$(this).val();
$('select:eq(1)').empty();
$.each(data[prop],function(index,ele){
$('select:eq(1)').append(
$('<option></option>')
.val(ele)
.text(ele)
)
})
})
</script>
</body>
</html>
本文地址：https://blog.csdn.net/sofewave_hand_LI/article/details/109263968