二十二、JS 三级联动demo

最新推荐文章于 2019-11-28 16:00:26 发布

蕙惠子

最新推荐文章于 2019-11-28 16:00:26 发布

阅读量273

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80420913

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

一、知识点

HTML DOM Option 对象：

Option 对象代表 HTML 表单中下拉列表中的一个选项。在 HTML 表单中 <option> 标签每出现一次，一个 Option 对象就会被创建。可通过表单的 elements[] 数组访问一个 Option 对象，或者通过使用 document.getElementById()访问；

Option()有2个参数，第一个参数是添加的内容第二个参数是所添加内容的value值

二、步骤

1.由于无法调用数据库，所以先构建几个数组存储数据；

2.添加dom动态创建下拉选项；

3.添加省、市文本改变事件，当省级选择项改变，市级文本内容会发生相应的变化；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动demo</title>
    <script>
        window.οnlοad=function() {
            //定义几个省市区的数据
            var sheng_city = [
                ["陕西省"],
                ["江苏省"],
                ["山东省"]
            ];
            var shi_city = [
                ["西安市", "咸阳市", "宝鸡市"],
                ["淮安市", "盐城市", "扬州市"],
                ["济南市", "德州市", "聊城市"]
            ];
            var qu_city = [
                [
                    ["高新区", "长安区", "未央区"],
                    ["秦都区", "咸阳区1", "咸阳区2"],
                    ["金台区", "成仓区", "渭滨区"]
                ],
                [
                    ["淮安区1", "淮安区2", "淮安区3"],
                    ["盐城区1", "盐城区2", "盐城区3"],
                    ["扬州区1", "扬州区2", "扬州区3"]
                ],
                [
                    ["济南区1", "济南区2", "济南区3"],
                    ["德州区1", "德州区2", "德州区3"],
                    ["聊城区1", "聊城区2", "聊城区3"]
                ]
            ];

            //动态创建dom元素 添加省级选项
            var sheng = document.getElementById("sheng");
            for (var i = 0; i < sheng_city.length; i++) {
                var option = new Option(sheng_city[i], i);
                sheng.appendChild(option);
            }

            //添加省文本改变事件
            var shi = document.getElementById("shi");
            var s_index = 0;//定义变量索引
            sheng.onchange = function () {
                shi.options.length = 1;
                qu.options.length = 1;
                s_index = this.value;
                for (var i = 0; i < shi_city.length; i++) {
                    var option = new Option(shi_city[s_index][i], i);
                    shi.appendChild(option);
                }
            };

            //添加市文本改变事件
            var qu = document.getElementById("qu");
            var q_index = 0;
            shi.onchange = function () {
                qu.options.length=1;
                q_index = this.value;
                for (var i = 0; i < qu_city.length; i++) {
                    var option = new Option(qu_city[s_index][q_index][i], i);
                    qu.appendChild(option);
                }
            }
        }
    </script>
</head>
<body>
省: <select id="sheng">
    <option>---请选择---</option>
</select>
市: <select id="shi">
    <option>---请选择---</option>
</select>
区: <select id="qu">
    <option>---请选择---</option>
</select>
</body>
</html>