js 级联下拉菜单

最新推荐文章于 2020-05-13 16:04:13 发布

代码那点事ing

最新推荐文章于 2020-05-13 16:04:13 发布

阅读量925

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_36925731/article/details/75530021

javascript 专栏收录该内容

12 篇文章

订阅专栏

制作省市级联下拉菜单，模拟一小部分省市数据进行效果的制作，

比如在省份拉框中添加两个省份信息，在页面中用数组保存这两个省份对应的城市信息，

动态将城市信息添加到下拉框中。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>级联下拉菜单</title>
    
</head>
<body onload="load()">
    省份:
        <select id="prov" onchange="changeCity()">   
            <option>--请选择省--</option>       
        </select>
       城市:
        <select id="city">        
            <option>--请选择市--</option>  
        </select> 

    <script type="text/javascript">
        //获取省份值
        var province = document.getElementById("prov");
        //获取市级值
        var city = document.getElementById("city");
        var arr_prov = new Array(new Option("--请选择省--", ''), new Option("福建省"), new Option("江西省"));
        var arr_city = new Array();
        arr_city[0] = new Array(new Option("--请选择市--", ''));
        arr_city[1] = new Array(new Option("福清", 'fq'), new Option("泉州", 'qz'), new Option("坂田", 'bt'), new Option("石狮", 'ss'));
        arr_city[2] = new Array(new Option("南昌", 'nc'), new Option("鹰潭", 'yt'), new Option("绍兴", 'sx'), new Option("景德镇", 'jdz'));
        //动态加载所有省份
        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>