JavaScript实现省市级联的操作2

zhangsan3333

于 2022-05-28 14:50:31 发布

阅读量145

点赞数

文章标签： javascript 开发语言 ecmascript

aaa

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

版权

这种方式需要用到html的dom操作方式(参考w3cschool的XML DOM操作),使用到的方法和属性如下:

方法名称	作用
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
元素对象.appendChild()	向节点的子节点列表末尾添加新的子节点
元素对象.removeChild()	删除子节点
元素对象.hasChildNodes()	返回元素是否拥有子节点

属性名称	作用
元素对象.firstChild	返回元素的首个子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 cityNode = document.getElementById("cityId");
//清除原来城市下拉选下的所有子元素.循环删除当前元素下的子元素
            while(cityNode.hasChildNodes()){
                cityNode.removeChild(cityNode.firstChild);
            }
//初始化城市下拉选框
            var optionObj = document.createElement("option");
            var textObj = document.createTextNode("‐‐请选择市‐‐");
//将文本节点添加到option标签中
            optionObj.appendChild(textObj);
//将option节点添加到城市下拉选中
            cityNode.appendChild(optionObj);
//遍历一维城市数组，每个城市就是一个option。
            for (var index = 0; index < cityData.length; index++) {
                var optionObj = document.createElement("option");
                var textObj = document.createTextNode(cityData[index]);
//将文本节点添加到option标签中
                optionObj.appendChild(textObj);
//将option节点添加到城市下拉选中
                cityNode.appendChild(optionObj);
            }
        }
    </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
点赞
踩
1

收藏

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

这种方式需要用到html的dom操作方式(参考w3cschool的XML DOM操作),使用到的方法和属性如下:方法名称作用document.createElement()创建元素节点document.createTextNode()创建文本节点元素对象.appendChild()向节点的子节点列表末尾添加新的子节点元素对象.removeChild()删除子节点元素对象.hasChildNodes()返回元素是否拥有子节点属性名称作.
复制链接

扫一扫