用原生JS写一个省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市联动</title>
</head>
<body>
<select name="pro" id="s1"></select>
<select name="city" id="s2"></select>
<script>
let proEle = document.getElementById('s1')
let cityEle = document.getElementById('s2')
data = {
"河北": ["廊坊", "邯郸", '唐山'],
"北京": ["朝阳区", "海淀区", '昌平区'],
"山东": ["威海市", "烟台市", '临沂市'],
'上海': ['浦东新区', '静安区', '黄浦区'],
'深圳': ['南山区', '宝安区', '福田区']
};
// 省的默认提示字符
let proDe = "<option disabled selected>--请选择--</option>"
// 添加到网页，带标签内容采用innerHTML
proEle.innerHTML = proDe
for (let key in data) {
// 创建option标签元素
let optionEle = document.createElement('option');
// 对标签内部填充文本信息
optionEle.innerText = key
// 设置选项的值，方便选择后将值传入到后端
optionEle.value = key
proEle.appendChild(optionEle)
}
// 设置市的默认选择
let cityDe = "<option disabled selected>--请选择--</option>"
cityEle.innerHTML = cityDe
//设置市级的信息
proEle.onchange = function () {
// 当省的值发生改变的时候
let currentPro = proEle.value
// 将字典当中信息的值添加到市的option当中
let currenCitylist = data[currentPro]
// 当省的信息发生改变，市的值清空
cityEle.innerHTML=''
// 循环遍历将市的值添加到市的option当中
for (let i = 0; i < currenCitylist.length; i++) {
let currentCity = currenCitylist[i]
// 设置option
let optionEle = document.createElement('option');
// 对标签内部填充文本信息
optionEle.innerText = currentCity
// 设置选项的值，方便选择后将值传入到后端
optionEle.value = currentCity
cityEle.appendChild(optionEle)
}
}
</script>
</body>
</html>
分类：
暂无分类
标签：
javascript
版权申明
本文系作者 @Tis-FYM 原创发布在Tis-FYI站点。未经许可，禁止转载。
暂无评论数据