【JavaScript-练习】二级联动

最新推荐文章于 2024-08-12 22:54:41 发布

愿所奋斗皆所得

最新推荐文章于 2024-08-12 22:54:41 发布

阅读量163

点赞数

分类专栏： JavaWeb学习文章标签： javascript js dom html5

本文链接：https://blog.csdn.net/weixin_40740272/article/details/104975794

版权

JavaWeb学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

二级联动 - 纯JS实现

假设现有一个通过选择下拉框中的省份，从而在后面的下拉框中获取得到其对应
城市。且用以纯JS实现，可参考如下代码：

<!DOCTYPE HTML>
<html>
<head>
<title>09-二级联动.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    var china = {
        "provinces":[{
            "name" : "吉林省",
            "city" :["长春","吉林市","四平","松原","通化"]
        },{
            "name" : "辽宁省",
            "city" :["沈阳","大连","鞍山","抚顺","铁岭"]
        },{
            "name" : "山东省",
            "city" :["济南","青岛","威海","烟台","潍坊"]
        },{
            "name" : "上海市",
            "city" :["闵行区","徐汇区"]
        },{
            "name" : "安徽省",
            "city" :["合肥市","六安市"]
        }]
    };

    window.onload = function () {
        /*第一步：将各个省份添加到province 这个select中*/
    //    获取省份的下拉框
        var provSelect = document.getElementById("province");
    //    获取各个省份
        var provLength = china.provinces.length;
    //    for循环，创建option，将省份作为innerHTML传入option中，将option作为子元素加入到select下
        for (var i=0; i < provLength; i++){
        //    创建option
            var provOpt = document.createElement("option");
        //   取出第i 个 province[] 中的name
            var provName = china.provinces[i].name;
        //    将省份name添加到option中
            provOpt.innerHTML = provName;
        //    将这个option添加到provSelect中
            provSelect.appendChild(provOpt);
        }

        /*第二步：由于当province发生改变的时候，对应的city也会不见
        		，从而变为其他省份的city
        *  所以：
        *       1、将上一个省份对应的city清除
        *		2、获取被选中得省份，取得其下得city添加到city下拉框中
        * */	
        provSelect.onchange = function () {
        //    获取city这个select，删除下面的option,除过下标为0的“--请选择市--”这个不用删除
            var citySelect = document.getElementById("city");
            for (var i = 1; i < citySelect.options.length;i++){
                citySelect.removeChild(citySelect.options[i]);
                i--;
            }

        //  获取provinceSelect下被选中的option，获取其下的city
            var selProv = china.provinces[provSelect.options.selectedIndex - 1];
            for (var i=0; i < selProv.city.length; i++){
                var cityOpt = document.createElement("option");
                //取出city
                var cityElement = selProv.city[i];
                cityOpt.innerHTML = cityElement;
                citySelect.appendChild(cityOpt);
            }
        }
    }
</script>

</head>
<body>
	<select id="province" name="province">
		<option value="none">--请选择省--</option>
	</select>

	<select id="city" name="city">
		<option value="none">--请选择市--</option>
	</select>

</body>

</html>

愿所奋斗皆所得

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-练习】二级联动

二级联动 - 纯JS实现假设现有一个通过选择下拉框中的省份，从而在后面的下拉框中获取得到其对应城市。且用以纯JS实现，可参考如下代码：<!DOCTYPE HTML><html><head><title>09-二级联动.html</title><meta http-equiv="content-type" conten...
复制链接

扫一扫

专栏目录