html select标签二级关联

最新推荐文章于 2023-03-22 00:54:02 发布

codingCoge

最新推荐文章于 2023-03-22 00:54:02 发布

阅读量3.5k

点赞数 2

分类专栏：网页前端

本文链接：https://blog.csdn.net/qq_38409944/article/details/80340868

版权

网页前端专栏收录该内容

58 篇文章 2 订阅

订阅专栏

Js版：

<!DOCTYPE html>
<html>
    <head>

        <script>
            //1.创建一个二维数组用于存储省份和城市
            var cities = new Array(3);
            cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
            cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
            cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
            cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

            function changeCity(val){

                //7.获取第二个下拉列表
                var cityEle = document.getElementById("city");

                //9.清空第二个下拉列表的option内容
                cityEle.options.length=0;

                //2.遍历二维数组中的省份
                for(var i=0;i<cities.length;i++){
                    //注意，比较的是角标
                    if(val==i){
                        //3.遍历用户选择的省份下的城市
                        for(var j=0;j<cities[i].length;j++){
                            //4.创建城市的文本节点
                            var textNode = document.createTextNode(cities[i][j]);
                            //5.创建option元素节点
                            var opEle = document.createElement("option");
                            //6.将城市的文本节点添加到option元素节点
                            opEle.appendChild(textNode);
                            //8.将option元素节点添加到第二个下拉列表中去
                            cityEle.appendChild(opEle);
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <select onchange="changeCity(this.value)">
                                    <option>--请选择--</option>
                                    <option value="0">湖北</option>
                                    <option value="1">湖南</option>
                                    <option value="2">河北</option>
                                    <option value="3">河南</option>
                                </select>
                                <select id="city">

                                </select>
    </body>
</html>

jQuery版：

<script>
            $(function(){
                //2.创建二维数组用于存储省份和城市
                var cities = new Array(3);
                cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

                $("#province").change(function(){
                    //10.清除第二个下拉列表的内容
                    $("#city").empty();

                    //1.获取用户选择的省份
                    var val = this.value;
                    //alert(val);
                    //3.遍历二维数组中的省份
                    $.each(cities,function(i,n){
                        //alert(i+":"+n);
                        //4.判断用户选择的省份和遍历的省份
                        if(val==i){
                            //5.遍历该省份下的所有城市
                            $.each(cities[i], function(j,m) {
                                //alert(m);
                                //6.创建城市文本节点
                                var textNode = document.createTextNode(m);
                                //7.创建option元素节点
                                var opEle = document.createElement("option");
                                //8.将城市文本节点添加到option元素节点中去
                                $(opEle).append(textNode);
                                //9.将option元素节点追加到第二个下拉列表中去
                                $(opEle).appendTo($("#city"));
                            });
                        }
                    });

                });
            });
        </script>

<select id="province">
    <option>--请选择--</option>
    <option value="0">湖北</option>
    <option value="1">湖南</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
    </select>
<select id="city">
</select>