省市区级联下拉列表的实现

2018-06-24 01:06:00来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="Author" content="猿道教育-Will老师" >
        <meta name="Keywords" content="猿说教育,HTML,CSS,JavaScript、省市区级联下拉列表" >
        <meta name="Description" content="网页的描述信息,简介:省市区级联下拉列表的实现" >
        <title>省市区级联下拉列表</title>
        <style>
            select{                 /*元素选择器,所有的同名标签select*/
                border:1px solid blue;
                /*padding:5px 10px;         上下、左右*/
                border: 1px solid red;      /*后面的优先级高*/
                padding: 5px 10px 6px 7px;
                margin: 20px 25px;
                border-radius:25px;
            }
            .bigSel{                /*类选择器 某个元素class属性值=bigSel*/
                width:280px;
            }
            #provinces{             /*id选择器,id属性值=provinces,优先级>类选择器>元素选择器*/
                border-color:blue;
            }
        </style>
        <script>
            // $是自己定义的一个方法,用于根据id获取元素
            function $(v){
                return document.getElementById(v);
            }
            var p = ['四川','河南','河北','山西','贵州','山东','甘肃'];
            p['四川'] = ['成都','绵阳','攀枝花','德阳','雅安'];
            p['河南'] = ['郑州','洛阳','周口','开封','信阳'];
            p['河北'] = ['保定','石家庄','邢台','唐山','邯郸'];
            p['成都'] = ['金牛区','成华区','武侯区','天府区','郫都区'];
            p['郑州'] = ['金水区','二七区'];
            // 在页面加载的时候讲所有省份添加到provinces的select中
            window.onload = function(){
                // 遍历省份数组,将其中的所有值,构造Option对象添加到省份下拉框中
                for(var i=0; i<p.length; i++){
                    // $是自己定义的一个方法,用于根据id获取元素
                    $("provinces").options.add(new Option(p[i],p[i]));
                }
                // 页面加载的时候,设置默认省份为 四川,城市变换为省会,区取这个城市的第一个区?
                $('provinces').value = "四川";
                showCitys($('provinces').value);
                $('citys').value = $('citys').options[0].value;
                showAreas($('citys').value);
            }

            /*在城市下拉框中显示省份v对应的所有城市*/
            function showCitys(v){
                // 清空城市列表框中原有所有城市
                $("citys").options.length = 0;
                if(!(v<0)){
                    var citys = p[v];       // 拿到这个省份对应的所有城市
                    for(var i= 0; i<citys.length; i++){
                        $("citys").options.add(new Option(citys[i],citys[i]));
                    }
                }
                // 设置地区默认值为第一个区
                showAreas($("citys").value);
            }

            /*在地区下拉框中显示该城市对应的所有区县*/
            function showAreas(v){
                $("areas").options.length = 0;
                if(!(v<0)){
                    // 拿到城市对应的所有区县
                    var areas = p[v];
                    for(var i=0; i<areas.length;i++){
                        $('areas').options.add(new Option(areas[i],areas[i]));
                    }
                }
            }

        </script>
    </head>
    <body>
    <!-- 乱码产生的原因:文件保存时的编码与打开文件时使用的编码不一致
        文件内部设置的编码,与文件保存时的编码不一致
    -->
        <form name="frmProvince">
            <select name="provinces" id="provinces" class="bigSel" onchange="showCitys(this.value)">
                <option value="-1">-- 请选择 --</option>
            </select>
            <select name="citys" id="citys" onchange="showAreas(this.value)">
                <option value="">-- 请选择 --</option>
            </select>
            <select name="areas" id="areas" >
                <option value="">-- 请选择 --</option>
            </select>
        </form>
    </body>
</html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:景点地图开发实战

下一篇:js map、filter、forEach