菜单多级联动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>省级列表多级联动</title>

</head>

<body>
    <form>
        <select id="province">
            <option value="-1">请选择</option>
        </select>
        <select id="city"></select>
        <select id="country"></select>
    </form>
    <script type="text/javascript">
        var provinceArr = ["上海", "江苏", "河北", "湖南"]
        var cityArr = [["上海市"], ["苏州市", "南京市"], ["石家庄", "秦皇岛"], ["长沙", "湘潭"]]
        var countryArr = [[["黄埔区", "静安区"]], [["虎丘区", "吴中区"], ["玄武区", "秦淮区"]], [["长安区", "桥西区"], ["海港区", "山海关区"]], [["芙蓉区", "岳麓区"], ["湘潭区"]]]
        function createOption(obj, data) {
            for (var i in data) {
                var op = new Option(data[i], i);
                obj.options.add(op)
                // console.log(op);
            }
        }
        var province = document.getElementById("province");
        createOption(province, provinceArr);

        var city = document.getElementById("city");
        province.onchange = function () {
            city.options.length = 0;
            createOption(city, cityArr[province.value]);
            if (province.value >= 0) {
                city.onchange();
            } else {
                country.options.length = 0;
            }
        };
        var country = document.getElementById("country");
        city.onchange = function () {
            country.options.length = 0;
            createOption(country, countryArr[province.value][city.value]);
        };

    </script>
</body>

</html>
posted on 2022-11-05 16:16 香香鲲阅读(38) 评论(0) 收藏举报