[网页示例]三联下拉框

Kara_YYDS

已于 2023-10-30 18:16:48 修改

阅读量29

点赞数

分类专栏：摘录文章标签： jquery 前端 javascript python

于 2023-10-30 14:49:53 首次发布

本文链接：https://blog.csdn.net/Kara_YYDS/article/details/134119226

版权

摘录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
{% load static %}
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>

<body>
<div id="select_form">
    <select name="" id="province">
        <option>请选择省</option>
    </select>
    <select name="" id="city">
        <option>请选择市</option>
    </select>
    <select name="" id="county">
        <option>请选择县/区</option>
    </select>
</div>
<script type="text/javascript" src="{% static '/javascript/jquery-3.6.0.js' %}"></script>
<script>
    // 三联下拉框数据
    let ArrayData = {
        江苏省: {
            南京市: "鼓楼区，江宁区，雨花区",
            扬州市: "广陵区，江都区，仪征",
            苏州市: "吴中区，新城区，高新区"
        },
        安徽省: {
            蚌埠市: "龙子湖区，新城区，高新区",
            合肥市: "蜀山区，新城区，高新区"
        }
    }
    // 创建数组存储option中的数据
    let arr_option = new Array;
    let i = 0;
    // .each() 遍历
    $('#select_form option').each(function (i) {
        // 遍历所有的option标签，通过下标将内容放在对应的数组下标里
        arr_option[i] = $(this).html();
        i++;
    })

    // 遍历ArrayData 获取数据
    $.each(ArrayData, function (province) {
        // 遍历数组，获取一部分的数据，首先是省份
        // 当id为省的时候，添加下拉框的内容
        $("#province").append("<option>" + province + "</option>")
    })

    // 封装获取下拉框内容方法
    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("#county")
        // 获取剩下的内容  市和县/区
        $.each(ArrayData, function (province, content) {
            // 选择省名和相关联的数据
            // selected 选中
            if ($('#province option:selected').text() == province) {
                $.each(content, function (city, county) {
                    $('#city').append("<option>" + city + "</option>")
                })
                $('#city').change(function () {
                    arr_option_index("#county")
                    $.each(content, function (city, county) {
                        if ($('#city option:selected').text() == city) {
                            $.each(county.split("，"), function () {
                                $('#county').append("<option>" + this +
                                    "</option>")
                            })
                        }
                    })
                })
            }
        })
    })
</script>
</body>

</html>