省份与城市联动的下拉框(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;
 }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的HTML实现省份城市的下的代码: ```html <!DOCTYPE html> <html> <head> <title>省份城市</title> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ // 定义省份城市数据 var provinceData = { "北京市": ["北京市"], "上海市": ["上海市"], "天津市": ["天津市"], "重庆市": ["重庆市"], "河北省": ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"], "山西省": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"], "辽宁省": ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市", "锦州市", "营口市", "阜新市", "辽阳市", "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"], }; // 初始化省份框 var provinceSelector = $("#province"); for (var province in provinceData) { var option = $("<option>").val(province).text(province); provinceSelector.append(option); } // 省份框改变事件 provinceSelector.change(function(){ var province = $(this).val(); var cityData = provinceData[province]; var citySelector = $("#city"); citySelector.empty(); for (var i in cityData) { var option = $("<option>").val(cityData[i]).text(cityData[i]); citySelector.append(option); } }); }); </script> </head> <body> <label for="province">省份:</label> <select id="province"> <option value="">请选择</option> </select> <label for="city">城市:</label> <select id="city"> <option value="">请选择</option> </select> </body> </html> ``` 该代码使用了jQuery库来简化DOM操作。在代码中,首先定义了一个`provinceData`对象,其中键为省份名称,值为该省份下的城市数组。然后通过jQuery来初始化省份框,以及定义其改变事件。当省份框改变时,根据选中的省份态生成相应的城市框选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值