HTML：js应用---下拉框联动（省市二级下拉框联动，含代码）

最新推荐文章于 2024-04-28 13:37:45 发布

杂杂烩本烩

最新推荐文章于 2024-04-28 13:37:45 发布

阅读量2.6k

点赞数 4

文章标签： javascript html 前端代码规范需求分析

本文链接：https://blog.csdn.net/weixin_62291385/article/details/133268624

版权

总体思路

省市二级下拉框联动包括省份下拉框和市级下拉框。我们需要做的是加载出相应省份选项，并且点击一省份时市级下拉框显示该省份下的市，简单来说就是数组的存储与跳转。

效果图展示

具体思路

省份下拉框

1.定义存放所有省份数据的数组，可任意加想要的省份

var provinceList =["==请选择==","北京市","江西省","湖北省"];

2.定义加载省份下拉框的方法，具体思路放在代码里。

//定义加载省份下拉框的方法loadProvince
    function loadProvince(){    
        //遍历provinceList数组中的元素
        //动态增加选项option到下拉框sltProvince中
        //1.1获得省份下拉框对象
        var sltProvince = document.getElementById("sltProvince");
        //1.2设置省份下拉框下拉选项的个数
        sltProvince.length = provinceList.length;
        //1.3遍历provinceList数组
        for(var i=0;i<provinceList.length;i++){
            //设置下拉框选项显示的内容
            sltProvince.options[i].text= provinceList[i];
        }
    }

市级下拉框

定义存放所有市数据的二维数组（二维数组的作用是需要与省份联动），数组内的数据根据省份数组添加。

 
    var cityList=[
                    ["==请选择=="],
                    ["东城区","西城区","朝阳区"],
                    ["南昌市","九江市","上饶市"],
                    ["武汉市","荆州市"],                
                ];

联动

定义根据当前选择的省份，加载对应市下拉框数据的方法（下列代码每个步骤都有说明）。

function loadCity(){
        //1.获得所选择的省份选项序号
        var idx = document.getElementById("sltProvince").selectedIndex;

        //2.从cityList数组中，取idx行所在的数据
        var cityData = cityList[idx];

        //3.遍历cityData中的数据，载入到市下拉框sltCity中
        var sltCity = document.getElementById("sltCity");
        sltCity.length = cityData.length;
        for(var i=0;i<cityData.length;i++){
            sltCity.options[i].text = cityData[i];
        }
    }

总体代码

<html>
    <head> <title>js应用---下拉框联动</title></head>
    <body>
        <select    id = "sltProvince"   onchange="loadCity()">
            <!---  <option>北京市</option>
            onchange 1.下拉框层次改变
                     2.输入框
            -->  
        </select>
        <select    id = "sltCity">
        </select>
    </body>
</html>
<script>
    //定义存放所有省份数据的数组
    var provinceList =["==请选择==","北京市","江西省","湖北省"];

    //定义存放所有市数据的二维数组
    var cityList=[
                    ["==请选择=="],
                    ["东城区","西城区","朝阳区"],
                    ["南昌市","九江市","上饶市"],
                    ["武汉市","荆州市"],                
                ];


    //定义加载省份下拉框的方法loadProvince
    function loadProvince(){    
        //遍历provinceList数组中的元素
        //动态增加选项option到下拉框sltProvince中
        //1.1获得省份下拉框对象
        var sltProvince = document.getElementById("sltProvince");
        //1.2设置省份下拉框下拉选项的个数
        sltProvince.length = provinceList.length;
        //1.3遍历provinceList数组
        for(var i=0;i<provinceList.length;i++){
            //设置下拉框选项显示的内容
            sltProvince.options[i].text= provinceList[i];
        }
    }

    //定义根据当前选择的省份，加载对应市下拉框数据的方法
    function loadCity(){
        //1.获得所选择的省份选项序号
        var idx = document.getElementById("sltProvince").selectedIndex;

        //2.从cityList数组中，取idx行所在的数据
        var cityData = cityList[idx];

        //3.遍历cityData中的数据，载入到市下拉框sltCity中
        var sltCity = document.getElementById("sltCity");
        sltCity.length = cityData.length;
        for(var i=0;i<cityData.length;i++){
            sltCity.options[i].text = cityData[i];
        }
    }

    //执行加载省份下拉框的方法
    loadProvince();
</script>

杂杂烩本烩

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML：js应用---下拉框联动（省市二级下拉框联动，含代码）

省市二级下拉框联动包括省份下拉框和市级下拉框。我们需要做的是加载出相应省份选项，并且点击一省份时市级下拉框显示该省份下的市，简单来说就是数组的存储与跳转。
复制链接

扫一扫