原生前端实现省市联动

实现下拉框点击之后进行移除请选择的选项

<!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>
posted @ 2021-08-02 16:48  Rainful  阅读(81)  评论(0)  编辑  收藏  举报