HTML的省市联动例子

最新推荐文章于 2022-11-16 15:27:06 发布

愿随我ღ

最新推荐文章于 2022-11-16 15:27:06 发布

阅读量490

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/PC_small_wang/article/details/103377565

版权

Java 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>

    <! -创建主体部分默认两个select->
    <tr align="right">省份的选择:</tr>
    <select id="province" onchange="addCity(this.value)">

        //value值用于后续的if语句的判别，根据判别选择所需的数组
        <option value="0">--请选择--</option>
        <option value="福建省">福建省</option>
        <option value="广东省">广东省</option>
    </select>

    <tr align="right">市的选择:</tr>
    <select id="city">
        <option>--请选择--</option>
    </select>
</body>
    <script type="text/javascript">

        //创建二维数组进行存放数据，默认第一个选项为省份之后的选项为市
        var arr = new Array(2);
        arr[0] = ["福建省","福州","厦门","龙岩","泉州","三明","漳州","宁德","莆田","南平"];
        arr[1] = ["广东省","广州","深圳","佛山","珠海","汕头","惠州","中山","韶关","湛江","肇庆","江门","茂名",
            "梅州","汕尾","河源","阳江","清远","东莞","潮州","揭阳","云浮"];

        function addCity(value) {

            var city = document.getElementById("city");
            var options = city.getElementsByTagName("option");

            //重复选择时对市的选项进行清除
            for (var m = 0; m <options.length; m++) {
                var op = options[m];
                city.removeChild(op);
                m--;
            }
            //利用for遍历
            for (var i = 0; i < arr.length; i++) {
                var arr1 = arr[i];
                var firstvalue = arr1[0];
                //if语句进行判断onchange事件传入的值与创建的数组第一个数据省份的匹配
                if (firstvalue == value) {
                    for (var j = 1; j < arr1.length; j++) {
                        var value1 = arr1[j];
                        //给city选择创建option的子节点
                        var craetOption = document.createElement("option");
                        var creatText = document.createTextNode(value1);
                        craetOption.appendChild(creatText);
                        city.appendChild(craetOption);
                    }
                }
            }
        }
    </script>
</html>