原生js实现级联下拉列表

<!DOCTYPE>

<html>

<head>

    <title>级联下拉列表</title>

    <meta charset="UTF-8">

</head>

<body onload="load()">

    <div>

        <select class='prov' id='prov' onchange='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列表中，上一省份对应城市的结果会影响下一省份的城市列表（不妨试一试）；故要用这条代码清空列表，消除影响。

巴特西

原生js实现级联下拉列表

最新文章

热门文章