JavaScript的作用和组成

最新推荐文章于 2022-12-19 16:08:33 发布

Good kid.

最新推荐文章于 2022-12-19 16:08:33 发布

阅读量400

点赞数 3

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/MTQ851/article/details/112168825

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js控制二级联动</title>
</head>
<body>
<select onchange="changeProvince(this)">
    <option value="-1">请选择</option>
    <option value="0">广东</option>
    <option value="1">湖北</option>
    <option value="2">山东</option>
</select>

<select id="a1">
    <option>请选择</option>
</select>

</body>
<script>
    var citys = new Array(3);
    citys[0] = ["深圳", "广州", "东莞", "惠州"];
    citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
    citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];

    function changeProvince(obj) {
        // 获取城市下拉框对象 eb = 城市下拉框对象
        var eb = document.getElementById("a1");
        // 清空城市下拉框中的选项
        eb.innerHTML = "<option>请选择</option>";
        // 获取省份下拉框选择的数据
        var value = obj.value;
        // 根据选择的省份去城市数组中获取对应的城市
        if (value > -1) {
            var Arrcitys = citys[value];
            // 循环遍历所有的城市
            for (var i = 0; i < Arrcitys.length; i++) {
                // 创建option标签
                var o = document.createElement("option");
                // 创建遍历出来的城市文本
                var text = document.createTextNode(Arrcitys[i]);
                // 把城市文本添加到option标签中
                o.appendChild(text);
                // 把option标签添加到城市下拉框中
                eb.appendChild(o);
            }

        }
    }

</script>
</html>

Good kid.

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的作用和组成

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js控制二级联动</title></head><body><select onchange="changeProvince(this)"> <option value="-1">请选择</option> .
复制链接

扫一扫