JavaScript实现省市级联的操作

最新推荐文章于 2024-05-19 20:17:52 发布

zhangsan3333

最新推荐文章于 2024-05-19 20:17:52 发布

阅读量810

点赞数

文章标签： javascript 开发语言 ecmascript

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/124901373

版权

案例分析：

创建二维数组，保存每个省份对应的城市，第1维的第0个元素是一个空数组。
给左边省的下拉列表添加改变事件，在事件方法中获取到当前省份所选择到的索引值。
索引从0开始，索引值对应的就是该省份对应的城市数组索引，城市所有的名字是一个一维数组。
先创建一个字符串，内容是：“–请选择市–”
遍历一维城市数组，每个城市用字符串拼接成一个option字符串。
得到城市的下拉列表，将上面接近的option字符串，使用innerHTML加到下拉列表中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //每个省份对应的数组
        var citys = new Array(5);
        citys[0] = [];
        citys[1] = ["哈尔滨","齐齐哈尔","大庆","佳木斯"];
        citys[2] = ["长春市","吉林市","四平市","通化市"];
        citys[3] = ["沈阳市","锦州市","大连市","铁岭市"];
        citys[4] = ["郑州市","洛阳市","安阳市","南阳市"];
        function selectCity(pNode) {
//获取到当前省份所选择到的索引值
            var index = pNode.selectedIndex;
//根据索引值取出该 省份对应 的城市
            var cityData = citys[index]; //一维数组
//清除原来城市下拉选下的所有子元素且初始化
            var options = "<option>‐‐请选择市‐‐</option>"
//遍历一维城市数组，每个城市就是一个option。
            for (var index = 0; index < cityData.length; index++) {
                var cityName = cityData[index];
                options += "<option>" + cityName + "</option>";
            }
//把这些所有的城市添加到cityselect框下。
            var cityNode = document.getElementById("cityId");
            cityNode.innerHTML = options;
        }
    </script>
</head>
<body>
<select id="provinceId" onchange="selectCity(this)">
    <option>‐请选择‐</option>
    <option>黑龙江</option>
    <option>吉林</option>
    <option>辽宁</option>
    <option>河南</option>
</select>
<select id="cityId">
    <option value="">‐‐请选择市‐‐</option>
</select>
</body>
</html>

在这里插入图片描述

zhangsan3333

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现省市级联的操作

案例分析：创建二维数组，保存每个省份对应的城市，第1维的第0个元素是一个空数组。给左边省的下拉列表添加改变事件，在事件方法中获取到当前省份所选择到的索引值。索引从0开始，索引值对应的就是该省份对应的城市数组索引，城市所有的名字是一个一维数组。先创建一个字符串，内容是：“–请选择市–”遍历一维城市数组，每个城市用字符串拼接成一个option字符串。得到城市的下拉列表，将上面接近的option字符串，使用innerHTML加到下拉列表中。<!DOCTYPE html><ht
复制链接

扫一扫