二级列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>
    <ul id="package">
    </ul>
</div>
<div>
    <ul id="price">
    </ul>
</div>

<div>
    <ul id="details">
    </ul>
</div>

<script>
    var city = [
        {
            "id": 10002,
            "name": "陕西省",
            "child": [
                {
                    "id": 100011,
                    "name": "西安市",
                    "child_name": "高新区",
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child_name": "新区",
                }
            ]
        },
        {
            "id": 10001,
            "name": "湖北省",
            "child": [
                {
                    "id": 100011,
                    "name": "咸宁市",
                    "child_name": "崇阳",
                }
            ],
        },
        {
            "id": 10002,
            "name": "陕西省",
            "child": [
                {
                    "id": 100011,
                    "name": "西安市",
                    "child_name": "高新区",
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child_name": "新区",
                }
            ]
        },
        {
            "id": 10003,
            "name": "甘肃省",
            "child": [
                {
                    "id": 100021,
                    "name": "兰州市",
                    "child_name": "兰州区",
                },
                {
                    "id": 100022,
                    "name": "酒泉市",
                    "child_name": "酒泉区",

                }
            ]
        }
    ]

    $(document).ready(function () {
        // $("#price-radio").hide();
        for (var i = 0; i < city.length; i++) {
            var package_r = "<input id = 'do_package' type='radio' name='id' value=" + city[i].id + " package_id=" + i + ">"
            var content = $("<span></span>").text(city[i].name);
            $("#package").append(package_r, content);
            $("#do_package").prop("checked", true);
        }

    });

    $(document).ready(function () {
        var child = city[0]['child'];
        if (child.length < 2) {
            //添加span
            var content_p = $("<span></span>").text(child[0].name);
            var content_p_s = $("<span></span>").text(child[0].child_name);
            $("#price").append(content_p);
            $("#details").append(content_p_s);
        } else {
            //添加radio
            for (var j = 0; j < child.length; j++) {
                var price_r = "<input id = 'do_price' type='radio' name='id_p' value=" + child[j].id + " price_id=" + j + " package_id=" + 0 + ">"
                var content_p = $("<span></span>").text(child[j].name);
                $("#price").append(price_r, content_p);
                $("#do_price").prop("checked", true);
            }
            var content_p_s = $("<span></span>").text(child[0].child_name);
            $("#details").append(content_p_s);

        }

    });

    //单选转换(一级)
    $('body').on('change', '#do_package', function () {
        //清除元素
        $("#price").empty();
        $("#details").empty();
        var package_id = $(this).attr("package_id");
        //判断数组长度
        var content = city[package_id]['child'];
        var length = city[package_id]['child'].length;
        if (length < 2) {
            //添加span
            var content_p = $("<span></span>").text(content[0].name);
            var content_p_s = $("<span></span>").text(content[0].child_name);
            $("#price").append(content_p);
            $("#details").append(content_p_s);
        } else {
            //添加radio
            for (var k = 0; k < content.length; k++) {
                var price_r = "<input id = 'do_price' type='radio' name='id_p' value=" + content[k].id + " price_id=" + k + " package_id=" + package_id + ">"
                var content_p = $("<span></span>").text(content[k].name);
                $("#price").append(price_r, content_p);
                $("#do_price").prop("checked", true);
            }
            var content_p_s = $("<span></span>").text(content[0].child_name);
            $("#details").append(content_p_s);

        }

    });
    //二级切换
    $('body').on('change', '#do_price', function () {
        //清除元素
        $("#details").empty();
        var price_id = $(this).attr("price_id");
        var package_id = $(this).attr("package_id");
        // //填充详情
        var content = city[package_id]["child"][price_id];
        var content_p_s = $("<span></span>").text(content.child_name);
        $("#details").append(content_p_s);

    });

</script>
</body>
</html>
推荐阅读更多精彩内容
