省市县选择

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

1.页面布局

      <div class="select_form">
    <select name="" id="province">
        <option value="">请选择省</option>
    </select>
    <select name="" id="city">
        <option value="">请选择市</option>
    </select>
    <select name="" id="town">
        <option value="">请选择县/区</option>
    </select>
</div>

2.先创建对象，对象里面放数据

   三联下拉框数据
    let ArryData = {
        江苏省: {
            南京市: "鼓楼区,江宁区,雨花台区",
            扬州市: "老城区,新城区,高新区",
            苏州市: "吴中区,新城区,高新区"
        },
        安徽省: {
            蚌埠市: "龙子湖区,新城区,高新区",
            合肥市: "瑶海区，蜀山区,啊哈"
        }
    }

创建数组存储option数据

    let arr_option = new Array
    let i = 0
    $(".select_form option").each(function (i) {

遍历所有option标签，通过下标将内容放在对象的数组下标里

        arr_option[i] = $(this).html()
        i++
    })

遍历ArryData获取数据

    $.each(ArryData, function (province) {

遍历数组获取一部分数据，首先是省份

当id为省的时候，添加下拉框的内容 $("#province").append("" + province + "")

    })

封装函数，获取下拉框内容

    function arr_option_index(obj) {
        //    通过index方法获取对象索引
        let index = $(obj).index()
        //通过下标匹配数组中下标相应的内容
        $(obj).html("<option>" + arr_option[index] + "</option>")
    }

当省份变化的时候，执行市和县/区

change()方法，元素改变时候触发

    $("#province").change(function () {
        // 获取市和县
        arr_option_index("#city")
        arr_option_index("#town")

获取剩下的内容 就是市和县/区

        $.each(ArryData, function (province, content) {
            //选择省出现相关的数据
            // :selected   选中
            if ($("#province option:selected").text() == province) {
                $.each(content, function (city, town) {
                    $("#city").append("<option>" + city + "</option>")
                })
                $("#city").change(function () {
                    arr_option_index("#town")
                    $.each(content, function (city, town) {
                        if ($("#city option:selected").text() == city) {
                            $.each(town.split(","), function () {
                                $("#town").append("<option>" + this + "</option>")
                            })

                        }
                    })
                })

            }
        })
    })