`

省份与城市联动的下拉框(2)

阅读更多

初始化数据:

var provinces=["北京市","天津市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","上海市"," 江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西自治区","海南省","重庆市","四川省","贵州省","云南省","西藏自治区","陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区","台湾省","其它"];

var provinceArray=[];
 for(var i=0;i<provinces.length;i++){
     provinceArray.push({value:provinces[i],text:provinces[i]});
 }

各个省份的主要城市:

  var bjCitys=["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"," 海淀区(中关村)","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"," 其他"];
 var tjCitys=["和平区","河东区","河西区","南开区","红桥区","塘沽区","汉沽区","大港区","西青区","津南区","武清区","蓟县","宁河县","静海县","其他"];
 var hbCitys=["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","衡水市","沧州市","邢台市","邯郸市","保定市","其他"];
 var sxCitys=["太原市","朔州市","大同市","长治市","晋城市","忻州市","晋中市","临汾市","吕梁市","运城市","其他"];
 var nmgCitys=["呼和浩特市","包头市","赤峰市","呼伦贝尔市","鄂尔多斯市","乌兰察布市","巴彦淖尔市","兴安盟","阿拉善盟","锡林郭勒盟","其他"];
 var lnCitys=["沈阳市","朝阳市","阜新市","铁岭市","抚顺市","丹东市","本溪市","辽阳市","鞍山市","大连市","营口市","盘锦市","锦州市","葫芦岛市","其他"];
 var jlCitys=["长春市","白城市","吉林市","四平市","辽源市","通化市","白山市","延边朝鲜族自治州","其他"];
 var hljCitys=["哈尔滨市","七台河市","黑河市","大庆市","齐齐哈尔市","伊春市","佳木斯市","双鸭山市","鸡西市","大兴安岭地区","牡丹江","鹤岗市","绥化市","其他"];
 var shCitys=["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","其他"];
 var jsCitys=["南京市","徐州市","连云港市","宿迁市","淮安市","盐城市","扬州市","泰州市","南通市","镇江市","常州市","无锡市","苏州市","其他"];
 var zjCitys=["杭州市","湖州市","嘉兴市","舟山市","宁波市","绍兴市","衢州市","金华市","台州市","温州市","丽水市","其他"];
 var awCitys=["合肥市","宿州市","淮北市","亳州市","阜阳市","蚌埠市","淮南市","滁州市","马鞍山市","芜湖市","铜陵市","安庆市","黄山市","六安市","巢湖市","池州市","宣城市","其他"];
 var fjCitys=["福州市","南平市","莆田市","三明市","泉州市","厦门市","漳州市","龙岩市","宁德市","其他"];
 var jxCitys=["南昌市","九江市","景德镇市","鹰潭市","新余市","萍乡市","赣州市","上饶市","抚州市","宜春市","吉安市","其他"];
 var sdCitys=["济南市","聊城市","德州市","东营市","淄博市","潍坊市","烟台市","威海市","青岛市","日照市","临沂市","枣庄市","济宁市","泰安市","莱芜市","滨州市","菏泽市","其他"];
 var hnCitys=["郑州市","三门峡市","洛阳市","焦作市","新乡市","鹤壁市","安阳市","濮阳市","开封市"," 商丘市","许昌市","漯河市","平顶山市","南阳市","信阳市","周口市","驻马店市","其他"];
 var hbeiCitys=["武汉市","十堰市","襄樊市","荆门市","孝感市","黄冈市","鄂州市","黄石市","咸宁市","荆州市","宜昌市","随州市","恩施土家族苗族自治州","仙桃市","天门市","潜江市","神农架林区","其他"];
 var hnanCitys=["长沙市","张家界市","常德市","益阳市","岳阳市","株洲市","湘潭市","衡阳市","郴州市","永州市","邵阳市","怀化市","娄底市","湘西土家族苗族自治州","其他"];
 var gdCitys=["广州市","清远市市","韶关市","河源市","梅州市","潮州市","汕头市","揭阳市","汕尾市"," 惠州市","东莞市","深圳市","珠海市","中山市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市"," 其他"];
 var gxziCitys=["南宁市","桂林市","柳州市","梧州市","贵港市","玉林市","钦州市","北海市","防城港市","崇左市","百色市","河池市","来宾市","贺州市","其他"];
 var hainanCitys=["海口市","三亚市","其他"];
 var chongqiCitys=["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川市","江津市","南川市","綦江县","潼南县","铜梁县","大足县","璧山县","垫江县","武隆县","丰都县","城口县","开县","巫溪县","巫山县","奉节县","云阳县","忠县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县","其他"];
 var scCitys=["成都市","广元市","绵阳市","德阳市","南充市","广安市","遂宁市","内江市","乐山市","自贡市","泸州市","宜宾市","攀枝花市","巴中市","资阳市","眉山市","雅安","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州县","其他"];
 var gzCitys=["贵阳市","六盘水市","遵义市","安顺市","毕节地区","铜仁地区","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","其他"];
 var yunanCitys=["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","普洱市","临沧市","宁德市","德宏傣族景颇族自治州","怒江傈僳族自治州","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","大理白族自治州","迪庆藏族自治州","西双版纳傣族自治州","其他"];
 var xizCitys=["拉萨市","那曲地区","昌都地区","林芝地区","山南地区","日喀则地区","阿里地区","其他"];
 var shanxiCitys=["西安市","延安市","铜川市","渭南市","咸阳市","宝鸡市","汉中市","安康市","商洛市","其他"];
 var gansuCitys=["兰州市 ","嘉峪关市","金昌市","白银市","天水市","武威市","酒泉市","张掖市","庆阳市","平凉市","定西市","陇南市","临夏回族自治州","甘南藏族自治州","其他"];
 var qinghaiCitys=["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","玉树藏族自治州","海南藏族自治州","果洛藏族自治州","海西蒙古族藏族自治州","其他"];
 var lxiaCitys=["银川市","石嘴山市","吴忠市","固原市","中卫市","其他"];
 var xizCitys=["乌鲁木齐市","克拉玛依市","喀什地区","阿克苏地区","和田地区","吐鲁番地区","哈密地区","塔城地区","阿勒泰地区","克孜勒苏柯尔克孜自治州","博尔塔拉蒙古自治州","昌吉回族自治州伊犁哈萨克自治州","巴音郭楞蒙古自治州","河子市","阿拉尔市","五家渠市","图木舒克市","其他"];
 var xianggCitys=["香港","其他"];
 var aomCitys=["澳门","其他"];
 var taiwCitys=["台湾","其他"];
 var other=["其它"];

 

//根据下省份下拉框里值显示城市信息
function showCity(){
 //var index=scmCustomerAccountList.getSelectedIndex();
//var selectProvinceValue=scmCustomerAccountList.getComponent("province",index).value;//得到省份值
 //var citySelect=scmCustomerAccountList.getComponent("city",index);//得到城市下拉框
 citySelect.setValue("");//城市的下拉框的值
 citySelect.setText("");//城市下拉框显示的值
 var cityArray=[];
 showCityList(selectProvinceValue,citySelect);
}

//根据省份名称显示城市下拉框里的值
//省份名称
//城市下拉框对象

function showCityList(selectProvinceValue,citySelect){
 switch(selectProvinceValue){
  case "北京市":
   cityArray=[];
   for(var i=0;i<bjCitys.length;i++){
    cityArray.push({value:bjCitys[i],text:bjCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "天津市":
   cityArray=[];
   for(var i=0;i<tjCitys.length;i++){
    cityArray.push({value:tjCitys[i],text:tjCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "河北省":
   cityArray=[];
   for(var i=0;i<hbCitys.length;i++){
    cityArray.push({value:hbCitys[i],text:hbCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "山西省":
   cityArray=[];
   for(var i=0;i<sxCitys.length;i++){
    cityArray.push({value:sxCitys[i],text:sxCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "内蒙古":
   cityArray=[];
   for(var i=0;i<nmgCitys.length;i++){
    cityArray.push({value:nmgCitys[i],text:nmgCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "辽宁省":
   cityArray=[];
   for(var i=0;i<lnCitys.length;i++){
    cityArray.push({value:lnCitys[i],text:lnCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "吉林省":
   cityArray=[];
   for(var i=0;i<jlCitys.length;i++){
    cityArray.push({value:jlCitys[i],text:jlCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "黑龙江省":
   cityArray=[];
   for(var i=0;i<hljCitys.length;i++){
    cityArray.push({value:hljCitys[i],text:hljCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "上海市":
   cityArray=[];
   for(var i=0;i<shCitys.length;i++){
    cityArray.push({value:shCitys[i],text:shCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "江苏省":
   cityArray=[];
   for(var i=0;i<jsCitys.length;i++){
    cityArray.push({value:jsCitys[i],text:jsCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "浙江省":
   cityArray=[];
   for(var i=0;i<zjCitys.length;i++){
    cityArray.push({value:zjCitys[i],text:zjCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "安徽省":
   cityArray=[];
   for(var i=0;i<awCitys.length;i++){
    cityArray.push({value:awCitys[i],text:awCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "福建省":
   cityArray=[];
   for(var i=0;i<fjCitys.length;i++){
    cityArray.push({value:fjCitys[i],text:fjCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "江西省":
   cityArray=[];
   for(var i=0;i<jxCitys.length;i++){
    cityArray.push({value:jxCitys[i],text:jxCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "山东省":
   cityArray=[];
   for(var i=0;i<sdCitys.length;i++){
    cityArray.push({value:sdCitys[i],text:sdCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "河南省":
   cityArray=[];
   for(var i=0;i<hnCitys.length;i++){
    cityArray.push({value:hnCitys[i],text:hnCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "湖北省":
   cityArray=[];
   for(var i=0;i<hbeiCitys.length;i++){
    cityArray.push({value:hbeiCitys[i],text:hbeiCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "湖南省":
   cityArray=[];
   for(var i=0;i<hnanCitys.length;i++){
    cityArray.push({value:hnanCitys[i],text:hnanCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "广东省":
   cityArray=[];
   for(var i=0;i<gdCitys.length;i++){
    cityArray.push({value:gdCitys[i],text:gdCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "广西自治区":
   cityArray=[];
   for(var i=0;i<gxziCitys.length;i++){
    cityArray.push({value:gxziCitys[i],text:gxziCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "海南省":
   cityArray=[];
   for(var i=0;i<hainanCitys.length;i++){
    cityArray.push({value:hainanCitys[i],text:hainanCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "重庆市":
   cityArray=[];
   for(var i=0;i<chongqiCitys.length;i++){
    cityArray.push({value:chongqiCitys[i],text:chongqiCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "四川省":
   cityArray=[];
   for(var i=0;i<scCitys.length;i++){
    cityArray.push({value:scCitys[i],text:scCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "贵州省":
   cityArray=[];
   for(var i=0;i<gzCitys.length;i++){
    cityArray.push({value:gzCitys[i],text:gzCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "云南省":
   cityArray=[];
   for(var i=0;i<yunanCitys.length;i++){
    cityArray.push({value:yunanCitys[i],text:yunanCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "西藏自治区":
   cityArray=[];
   for(var i=0;i<xizCitys.length;i++){
    cityArray.push({value:xizCitys[i],text:xizCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "陕西省":
   cityArray=[];
   for(var i=0;i<shanxiCitys.length;i++){
    cityArray.push({value:shanxiCitys[i],text:shanxiCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "甘肃省":
   cityArray=[];
   for(var i=0;i<gansuCitys.length;i++){
    cityArray.push({value:gansuCitys[i],text:gansuCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "青海省":
   cityArray=[];
   for(var i=0;i<qinghaiCitys.length;i++){
    cityArray.push({value:qinghaiCitys[i],text:qinghaiCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "宁夏回族自治区":
   cityArray=[];
   for(var i=0;i<lxiaCitys.length;i++){
    cityArray.push({value:lxiaCitys[i],text:lxiaCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "新疆维吾尔自治区":
   cityArray=[];
   for(var i=0;i<xizCitys.length;i++){
    cityArray.push({value:xizCitys[i],text:xizCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "香港特别行政区":
   cityArray=[];
   for(var i=0;i<xianggCitys.length;i++){
    cityArray.push({value:xianggCitys[i],text:xianggCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "澳门特别行政区":
   cityArray=[];
   for(var i=0;i<aomCitys.length;i++){
    cityArray.push({value:aomCitys[i],text:aomCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "台湾省":
   cityArray=[];
   for(var i=0;i<taiwCitys.length;i++){
    cityArray.push({value:taiwCitys[i],text:taiwCitys[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
  case "其它":
   cityArray=[];
   for(var i=0;i<other.length;i++){
    cityArray.push({value:other[i],text:other[i]});  
   }
   citySelect.setDatas(cityArray);
   break;
 }
}

分享到:
评论
2 楼 walle1027 2011-12-31  
非常有用,感谢楼主,如果有省市和城市的代码就更好了。
1 楼 Jangey 2009-07-15  
  my god  

相关推荐

    省份城市区县_下拉框三级联动选择

    在IT行业中,尤其是在网页开发和前端交互设计领域,"省份城市区县_下拉框三级联动选择"是一种常见的用户界面设计模式。这种设计主要用于让用户在输入地址或选择地理位置时,通过三个相互关联的下拉框依次选取省份、...

    C#省份城市下拉框联动简单实现方法

    在C#编程中,省份城市下拉框联动是一种常见的用户界面交互设计,它允许用户从一个下拉框(比如省份)中选择一个选项后,另一个下拉框(比如城市)会自动更新为与所选省份相关联的城市。这种功能常见于地址输入、物流...

    layui-省市县三级联动下拉框-HTML源码

    在IT行业中,网页开发经常会遇到需要实现省市区县等多级联动下拉框的需求,这在用户填写地址、选择服务区域等场景十分常见。本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现...

    基于layui开发的省市区三级联动下拉框.zip

    在这个项目中,当用户从第一级下拉框(省份)中选择一个省份时,第二级下拉框(城市)会自动更新对应省份的城市列表;同样,当用户在第二级下拉框选择一个城市后,第三级下拉框(区县)会展示该城市下的所有区县。...

    js2级省市联动下拉框

    在网页开发中,"js2级省市联动下拉框"是一种常见的交互设计,它用于创建一个用户友好的界面,让用户能够方便地选择省份和城市。这个功能通常在填写地址、设置配送区域等场景中出现。下面我们将详细探讨如何实现这样...

    js三级联动下拉框

    在Web开发中,三级联动下拉框是一种常见的用户交互方式,主要用于提供多级数据选择的功能,比如省份、城市、区县的选择等场景。该功能通过JavaScript实现,使得当前级下拉框的选择能够动态地改变下一级下拉框的内容...

    mvc3二级联动下拉框

    例如,可以选择省份后再选择城市,或者选择品牌后再选择型号等。 首先,我们来看“Mvc3DropDownList”这个文件名,这可能是包含实现二级联动下拉框所需代码的项目或类库。在这个项目中,可能包含了控制器...

    js实现省份城市联动

    在前端开发中,实现省份城市联动是一项常见的需求,它可以让用户在选择省份时,自动更新下拉框中的城市选项,提供更加友好的交互体验。本示例中,我们将深入探讨如何使用JavaScript来实现这一功能。 首先,我们需要...

    AJAX版省市区三级联动下拉框

    在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...

    jquery动态创建联动下拉框

    这种功能在诸如地区选择(国家-省份-城市)或者产品分类(大类-小类)等场景中广泛应用。 首先,我们需要理解基本的HTML结构。联动下拉框通常由`&lt;select&gt;`元素和多个`&lt;option&gt;`元素组成。例如: ```html 类别1 ...

    javascript实现二级联动下拉框

    ### JavaScript 实现二级联动下拉框 在网页开发中,我们经常会遇到需要用户选择特定信息的情况,例如选择所在的省份和城市。为了提供更好的用户体验并简化用户的操作步骤,开发者经常使用“联动”技术来关联两个或...

    php 三级联动下拉框

    在网页设计中,三级联动下拉框是一种常见的交互元素,特别是在数据层级结构比较复杂的场景下,如地区选择、产品分类等。它通过三个下拉菜单的级联关系,让用户能够逐步细化选择,从大类到小类,最终精确地选取目标...

    三级联动 下拉框

    在网页设计和开发中,"三级联动下拉框"是一种常见的交互元素,它通常用于实现多级关联选择,比如省份-城市-区县的选择。这种功能可以极大地提高用户体验,尤其是在处理大量分类信息时。下面我们将深入探讨这个话题,...

    无限联动下拉框js版

    无限联动下拉框是一种常见的前端交互设计,常用于级联选择场景,如省份-城市-区县的选择。这种效果可以通过JavaScript实现,特别是在不依赖大型框架如jQuery或Vue的情况下,纯JavaScript实现更能锻炼开发者对DOM操作...

    javascript实现二级联动下拉框.docx

    JavaScript 实现二级联动下拉框 本文将详细介绍如何使用 JavaScript 实现二级联动下拉框,包括标题、描述、标签、部分内容等信息。 标题:JavaScript 实现二级联动下拉框 描述:JavaScript 实现二级联动下拉框是...

    二级联动下拉框

    在网页设计和开发中,"二级联动下拉框"是一种常见的交互元素,它通常用于实现多级选择或者关联数据的筛选。例如,在选择省份时,第一个下拉框会选择省份,当选择一个省份后,第二个下拉框会动态加载并显示该省份的...

    这里是基于layui开发的省市区三级联动下拉框.zip

    本项目是基于layui框架实现的省市区三级联动下拉框,这是一个常见的前端表单元素,常用于地址选择或定位功能。layui是一款轻量级的前端组件库,它提供了丰富的UI组件,易于使用且性能优异,特别适合快速构建中大型...

    jquery省市县联动下拉框

    在网页开发中,"jQuery省市县联动下拉框"是一个常见的功能需求,它主要用于实现用户在选择省份时,对应的市和县下拉框能够自动更新,提供与所选省份匹配的选项。这种交互设计可以极大地提升用户体验,尤其在处理大量...

    jquery 省市联动下拉框

    标题中的“jquery 省市联动下拉框”是指在网页设计中,使用jQuery库实现的一个功能,允许用户从一个下拉框选择省份后,另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中,...

    layui下拉框二级数据联动 fzzx.zip

    例如,一级下拉框选择省份后,二级下拉框会自动更新为对应省份的城市列表。 在提供的`fzzx.zip`压缩包中,包含了一个名为`a.html`的文件,这个文件很可能是用来展示如何实现layui下拉框二级联动的示例代码。打开这...

Global site tag (gtag.js) - Google Analytics