JS2级联动

最新推荐文章于 2022-04-13 21:34:12 发布

qq_40137639

最新推荐文章于 2022-04-13 21:34:12 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/qq_40137639/article/details/107349221

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="" class="province"></select>
    <select name="" id="" class="city"></select>
    <script src="./area.js"></script>
    <script>
        var sel = document.querySelector('.province');
        var city = document.querySelector('.city');
        for (var x in area) {
            var option = document.createElement('option');
            sel.appendChild(option);
            option.innerHTML = x;
        }

        var options = document.querySelectorAll('option');
        for (var i = 0; i < options.length; i++) {
            if (options[i].selected) {
                var opText = options[i].innerText;
                console.log(opText);
                area[opText].forEach(function (item, index) {
                    for (var y in item) {
                        var option = document.createElement('option');
                        city.appendChild(option);
                        option.innerHTML = y;
                    }
                });
            }
        }

        sel.addEventListener('change', function () {
            city.length = 0;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                    var opText = options[i].innerText;
                    console.log(opText);
                    area[opText].forEach(function (item, index) {
                        for (var y in item) {
                            var option = document.createElement('option');
                            city.appendChild(option);
                            option.innerHTML = y;
                        }
                    });
                }
            }
        });

    </script>
</body>

</html>

qq_40137639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS2级联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <select
复制链接

扫一扫