<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="./city.js"></script>
</head>
<body>
<select name="" id="set"></select>
<select name="" id="name"></select>
<select name="" id="area"></select>
</body>
<script>
var sheng=''
$(function () {
var a = '<option value="">请选择省</option>'
for (let i in citys) {
a += `<option value="${i}">${citys[i].name}</option>`
}
$('#set').html(a)
$('#set').change(function () {
var xiabiao = $(this).val()
var b = `<option value="">请选择市级</option>`
for (let i in citys[xiabiao].city) {
b += `<option value="${i}">${citys[xiabiao].city[i].name}</option>`
}
$('#name').html(b)
sheng = $(this).val()
})
$('#name').change(function(){
var shi = $(this).val()//市
console.log(shi);
var c = `<option value="">请选择区级</option>`
for (let i in citys[sheng].city[shi].area) {
c += `<option value="${i}">${citys[sheng].city[shi].area[i]}</option>`
}
$('#area').html(c)
})
})
</script>
</html>
jq 三级联动
最新推荐文章于 2024-07-21 02:56:05 发布