zoukankan      html  css  js  c++  java
  • JavaScript之城市联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        
    <head>
            
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            
    <title>城市联动</title>
            
        
    </head>
        
    <body>
            
            test
            
    <select id="province"></select>
            
    <select id="city"></select>
            
            
    <script type="text/javascript">
                  
    //选择控件的名称
                 var selector = [ "province""city"];
                  
    //初始值输入框的名称,可以用两个隐含输入框代替
                 var initInput=["province_init","city_init"];
                   
    //["请选择","请选择"],  
                 
                    
    //地方名称 
                  var memu=[
                  [
    "上海","上海"],
                  [
    "北京","北京"],
                  [
    "天津","天津"],
                  [
    "重庆","重庆"],
                  [
    "山东省","济南","青岛","滨州","德州","东营","荷泽","济宁","莱芜","聊城","临沂","日照","泰安","威海","潍坊","烟台","枣庄","淄博"],
                  [
    "江苏省","南京","苏州","常州","淮安","连云港","南通","宿迁","无锡","徐州","盐城","泰州","扬州","镇江"],
                  [
    "浙江省","杭州","湖州","嘉兴","金华","丽水","宁波","衢州","绍兴","台州","温州","舟山"],
                  [
    "福建省","福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"],
                  [
    "广东省","广州","深圳","潮州","东莞","佛山","河源","惠州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","阳江","云浮","湛江","肇庆","中山","珠海"],
                  [
    "黑龙江省","哈尔滨","大庆","大兴安岭","鹤岗","黑河","鸡西","佳木斯","牡丹江","七台河","齐齐哈尔","双鸭山","绥化","伊春"],
                  [
    "吉林省","长春","白城","白山","吉林","辽源","四平","松原","通化","延边"],
                  [
    "辽宁省","沈阳","大连","鞍山","北票","本溪","朝阳","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","铁岭","营口"],
                  [
    "内蒙古","呼和浩特","阿拉善盟","巴彦淖尔盟","包头","赤峰","鄂尔多斯","呼伦贝尔","通辽","乌海","乌兰察布盟","锡林郭勒盟","兴安盟"],
                  [
    "河北省","石家庄","保定","沧州","承德","定州","邯郸","衡水","廊坊","皇岛","唐山","邢台","张家口"],
                  [
    "山西省","太原","长治","大同","晋城","晋中","临汾","吕梁","朔州","忻州","阳泉","运城"],
                  [
    "河南省","郑州","开封","安阳","鹤壁","济源","焦作","漯河","洛阳","南阳","平顶山","濮阳","三门峡","商丘","新乡","信阳","许昌","周口","驻马店"],
                  [
    "安徽省","合肥","安庆","蚌埠","亳州","巢湖","滁州","阜阳","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","池州"],
                  [
    "陕西省","西安","安康","宝鸡","汉中","商洛","铜川","渭南","咸阳","延安","榆林"],
                  [
    "江西省","南昌","抚州","赣州","吉安","景德镇","九江","萍乡","上饶","新余","宜春","鹰潭"],
                  [
    "湖北省","武汉","鄂州","恩施","黄冈","黄石","荆门","荆州","神农架林","十堰","随州","天门","仙桃","咸宁","襄樊","孝感","宜昌"],
                  [
    "湖南省","长沙","常德","郴州","衡阳","怀化","娄底","邵阳","湘潭","湘西","益阳","永州","岳阳","张家界","株洲"],
                  [
    "甘肃省","兰州","白银","定西","甘南","嘉峪关","金昌","酒泉","临夏","陇南","平凉","庆阳","天水","武威","张掖"],
                  [
    "宁夏","银川","固原","石嘴山","吴忠"],
                  [
    "青海省","西宁","果洛","海北","海东","海南","海西","黄南","玉树"],
                  [
    "四川省","成都","阿坝","巴中","达州","德阳","甘孜","广安","广元","乐山","凉山","眉山","绵阳","内江","南充","攀枝花","遂宁","雅安","宜宾","资阳","泸州","自贡"],
                  [
    "贵州省","贵阳","安顺","毕节","六盘水","铜仁","遵义","黔东南","黔南","黔西南"],
                  [
    "云南省","昆明","保山","楚雄","大理","德宏","迪庆","红河","丽江","临沧","怒江","曲靖","思茅","西双版纳","玉溪","昭通","中甸"],
                  [
    "广西","南宁","百色","北海","崇左","防城港","贵港","桂林","合山","河池","贺州","来宾","柳州","钦州","梧州","玉林"],
                  [
    "西藏","拉萨","阿里","昌都","林芝","那曲","日喀则","山南"],
                  [
    "新疆","乌鲁木齐","阿克苏","阿拉尔","阿勒泰","阿图什","巴音郭楞","博尔塔拉","博乐","昌吉","哈密","和田","喀什","克拉玛依","克孜勒苏","库尔勒","奎屯","石河子","塔城","吐鲁番","五家渠","伊犁","伊宁"],
                  [
    "海南省","海口","白沙","保亭","昌江","澄迈","儋州","定安","东方","乐东","临高","陵水","琼海","琼中","三亚","屯昌","万宁","文昌","五指山"]  
                ];
                
                
    var menuProvice = document.getElementByIdx_x(selector[0]);
                
    var menuCity = document.getElementByIdx_x(selector[1]);
                
                
                
    function LoadProvice()
                {
                    menuProvice.length
    ++;
                    menuProvice.options[menuProvice.length 
    - 1].text = "请选择";
                    menuProvice.options[menuProvice.length 
    - 1].value = "";
                    
                    
                    
    for(var i = 0;i < memu.length;i++)
                    {
                        menuProvice.length
    ++;
                        menuProvice.options[menuProvice.length 
    - 1].text = memu[i][0];
                        menuProvice.options[menuProvice.length 
    - 1].value = memu[i][0];                    
                    }
                    menuProvice.onchange 
    = Function("proviceChanged()");
                    
                }
                LoadProvice();
                
                
    function proviceChanged()
                {
                    
    var selValue = menuProvice.value;
                    
    var selectIndex = 0;
                    
                    menuCity.length 
    = 0;
                    menuCity.length
    ++;
                    menuCity.options[menuCity.length 
    - 1].text = "请选择";
                    menuCity.options[menuCity.length 
    - 1].value = "";
                    
    if(selValue == "" || selValue == "请选择")
                        
    return;
                    
                    
    for(var i = 0;i< memu.length;i++)
                    {
                        
    if(memu[i][0== selValue)
                        {
                            selectIndex 
    = i;
                            
    break;
                        }
                        
                    }

                    
                    
    for(var i = 1;i < memu[selectIndex].length;i++)
                    {
                        menuCity.length
    ++;
                        menuCity.options[menuCity.length 
    - 1].text = memu[selectIndex][i];
                        menuCity.options[menuCity.length 
    - 1].value = memu[selectIndex][i];
                        
                    }
                    
    return;
                    
                    
                }
                
                
            
    </script>
        
    </body>
    </html>

  • 相关阅读:
    this指向问题
    b继承a的函数
    如何解决跨域问题
    事件冒泡和阻止事件冒泡
    Spring5(二)——IOC
    MySQL基础(四)——
    MySQL基础(二)——常用命令
    MySQL基础(一)——入门
    Linux(二)——常用命令
    Linux(一)——简介
  • 原文地址:https://www.cnblogs.com/cllchaoblog/p/2767755.html
Copyright © 2011-2022 走看看