原生js实现级联下拉列表

最新推荐文章于 2024-06-27 20:13:46 发布

weixin_34252686

最新推荐文章于 2024-06-27 20:13:46 发布

阅读量479

点赞数 1

原文链接：http://www.cnblogs.com/dll-ft/p/5539219.html

版权

<!DOCTYPE>
<html>
<head>
    <title>级联下拉列表</title>
    <meta charset="UTF-8">
</head>

<body οnlοad="load()">
    <div>
        <select class='prov' id='prov' οnchange='changeCity()'>
            <option value=''>--请选择省--</option>
        </select>
        <select class='city' id='city'>
            <option value=''>--请选择市--</option>
        </select>
    </div>

    <script>
        var province=document.getElementById("prov");
        var city=document.getElementById("city");
        var arr_prov=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
        var arr_city=new Array();
        arr_city[0]=new Array(new Option("--请选择市--",''));
        arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
        arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
        //动态载入所有省份
        function load(){
            for(var i=0;i<arr_prov.length;i++){
                province.options[i]=arr_prov[i];
            }
        }
        //选中省份之后，根据索引动态载入相应城市
        function changeCity(){
            //清空上次的选项
            city.options.length=0;
            //获取省一级的下拉列表选中的索引
            var index=province.selectedIndex;
            for(var i=0;i<arr_city[index].length;i++){
                city.options[i]=arr_city[index][i];
            }
        }
    </script>
</body>
</html>

要点：
1.省份信息可以在页面加载时就导入
2.城市信息随着省份选择的改变而改变，故应放在省份的onchange函数内
3.本例核心：selectedIndex属性，下拉列表所选中项的索引
4.一个bug处理：若不加上“city.options.length=0”，则在city列表中，上一省份对应城市的结果会影响下一省份的城市列表（不妨试一试）；故要用这条代码清空列表，消除影响。

转载于:https://www.cnblogs.com/dll-ft/p/5539219.html

weixin_34252686

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现级联下拉列表

<!DOCTYPE><html><head> <title>级联下拉列表</title> <meta charset="UTF-8"></head><body onload="load()"> <div> <sel...
复制链接

扫一扫