省市联动

最新推荐文章于 2024-05-29 13:35:10 发布

Lemon丶鹏

最新推荐文章于 2024-05-29 13:35:10 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/Qpc960811/article/details/82748538

版权

省市联动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script>
        //设置二维数组
        var arrs = new Array(5); // 创建一个数组

        // arrs中的每一个元素都是一个数组
        //给这个数组里面添加数据,这个数据是一维数组
        arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
        arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
        arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
        arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
        arrs[4] = new Array("长春市","吉林市","四平市","延边市");

 function chooseCity(value) {
     // 获取省份的对象 得到一个数组
     var city = document.getElementById("city");
        //alert(  city.length );// 1
/*
       返回得到的数组中含有一个元素 需要把其长度改为0
     for ( var z = 0 ; z < city.length ; z++){
        document.write(city[0]);   // [object HTMLOptionElement]
     }
*/

      city.length = 0 ;// 上下都可以 
   //  city.options.length = 0;  //数据清空


        for ( var i = 0 ; i <arrs.length;i++){
            if (value == i ){
                // 获取所有市的信息
                for (var j =0;j <arrs[i].length;j++){
                    // document.write(arrs[i][j]);
                    // 创建option 标签元素
                    var element = document.createElement("option");

                //    创建文本节点
                    var text = document.createTextNode(arrs[i][j]);

                    // 把文本节点添加到element元素中
                    element.appendChild(text);

                    //把element元素添到city的下拉列表中
                    city.appendChild(element);
                }
            }
        }
 }
    </script>
</head>
<body>
<!-- 把省份列出来 -->
<select id="province" name="province" onchange="chooseCity(this.value)">
    <option value="">-请选择-</option>
    <option value="0">浙江省</option>
    <option value="1">江苏省</option>
    <option value="2">湖北省</option>
    <option value="3">河北省</option>
    <option value="4">吉林省</option>
</select>
<!--设置省会的下拉列表-->
<select name="city" id="city">
    <option value="">--请选择--</option>
</select>

</body>
</html>