6.使用jquery改造地址级联

<head>
    <meta charset="UTF-8">
    <title>5.示例-使用jquery改造地址级联</title>
</head>
<body>
    <div id="app">
        地址:&nbsp;&nbsp;&nbsp;
        <select name="prov">
            <option value="">选择省</option>
        </select>&nbsp;&nbsp;&nbsp;
        <select name="city">
            <option value="">选择市</option>
        </select>&nbsp;&nbsp;&nbsp;
        <select name="district">
            <option value="">选择区</option>
        </select>
    </div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
    let prov =["广东省", "福建省", "海南省"];
    let city = [
        ["广州市", "深圳市", "珠海市"]
        , ["福州市", "厦门市", "泉州市"]
        , ["海口市", "三亚市"]
    ];

    initLoad();

    function initLoad() {

        /* 添加省份选项 */
        for (let i = 0; i < prov.length; i++) {
            let new_option = document.createElement("option");
            $("[name='prov']")[0].appendChild(new_option);
            new_option.value = i;
            new_option.innerHTML = prov[i];
        }

        //为省份下拉框绑定事件
        $("[name='prov']").on("change", loadCity);
    }

    function loadCity() {

        let city_option = $("[name='city'] option:gt(0)");

        for (let i = 0; i < city_option.length; i++) {
            $("[name='city']")[0].removeChild(city_option[i]);
        }

        /* 获取省份下标 */
        let provIndex = $("[name='prov'] option:selected").val();
        // alert(provIndex);

        /* 加载城市选项 */
        for (let i = 0; i < city[provIndex].length; i++) {
            let new_option = document.createElement("option");
            $("[name='city']")[0].appendChild(new_option);
            new_option.value = i;
            new_option.innerHTML = city[provIndex][i];
        }
    }
</script>
posted on 2022-04-16 18:41 小小程序猿level1 阅读(34) 评论(0) 收藏举报