js省市二级联动(个别城市)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    
    <style type="text/css">
        #log {
            height: 500px;
            margin: 0 auto;
            background: #9999FF;
            width: 500px;
        }
        
        .ys {
            margin: 20px;
            width: 200px;
            height: 30px;
            background: #9999FF;
        }
    </style>

    <body>
        <div id="log">
            <form action="" method="get">
                <select class="ys" id="province" onchange="getcity()">
                </select>
                <select class="ys" id="city">
                    
                </select>
            </form>
        </div>
    </body>
<script type="text/javascript">
        var province=document.getElementById('province');  
        var city=document.getElementById('city');    
        // province的text
        var arr_1=new Array('北京','上海','天津','重庆','河北','山西','内蒙古','辽宁','吉林','黑龙江','江苏','浙江','安徽');
        var arr=new Array();//city的text
        arr[0] = "东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"
        arr[1] = "黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"
        arr[2] = "和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"
        arr[3] = "万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"
        arr[4] = "石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"
        arr[5] = "太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"
        arr[6] = "呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"
        arr[7] = "沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"
        arr[8] = "长春,吉林,四平,辽源,通化,白山,松原,白城,延边"
        arr[9] = "哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"
        arr[10] = "南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"
        arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水" 
        arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州" 
        for(var i=0;i<arr_1.length;i++){  //创建option     a[i]=new Option("text","value","true","true");
            var option=document.createElement('option'); 
            province.appendChild(option);
            option.text=arr_1[i];
        }
        var a=arr[0].split(',');// 字符逗号切割  typeof(a) = 'obj'

        for(var i=0;i<a.length;i++){ //为city赋值同上
            var option=document.createElement('option');
            city.appendChild(option);
            option.text=a[i];
        }
        function getcity(){ //onchange事件用于select和input单选框和复选框的值改变 
            var flag=province.selectedIndex;//当前的select的index
            city.length=0;//清空city的select的内容即长度
            a=arr[flag].split(',');//同上
            for(var i=0;i<a.length;i++){
            var option=document.createElement('option');
            city.appendChild(option);
            option.text=a[i];
            }
        }
        
        
    </script>
</html>

 

posted @ 2017-12-05 19:14  Doublekai  阅读(205)  评论(0编辑  收藏  举报