原生前端实现省市联动
实现下拉框点击之后进行移除请选择的选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
<script src="../lib/jquery-3.6.0.js"></script>
<style>
select{
display: inline-block;
height: 25px;
width: 100px;
}
</style>
</head>
<body>
<div>
<label for="province">籍贯</label>
<select name="province" id="province">
<option value="-1">--请选择--</option>
</select>
<label for="city">城市</label>
<select name="city" id="city">
<option value="-1">--请选择--</option>
</select>
</div>
<script>
let provinces = ['安徽', '河南', '广东'];
let citys = [['安庆', '合肥', '芜湖'], ["郑州", "信阳", "洛阳", "南阳", "开封"], ["广州", "深圳", "珠海", "中山", "韶关"]];
let provinceObj = $("#province");
let cityObj = $("#city");
provinceObj.click(
function () {
provinceObj.empty();
$(provinces).each(function (index, ele) {
let $option = $("<option value=\'" + index + "\'>" + ele + "</option>");
provinceObj.append($option);
})
provinceObj.off('click');
}
).change(
function () {
cityObj.empty();
$(citys[provinceObj.val()]).each(function (index, ele) {
let $option = $("<option value=\'" + index + "\'>" + ele + "</option>");
cityObj.append($option);
})
}
);
</script>
</body>
</html>
