using JS to control two select(html),the data can be loaded from database and XML,and show in the select

1 存储 省市的xml文件

add1code="1100,3100,1200,5000,4400,3200,3300,3700,3400,4100,1300,2100,3500,5100,4500,4300,4200,6100,5200,2200,3600,5300,1400,6500,6200,4600,6400,8100,5400,6300,7100,8200,2300,1500";
add1name="北京,上海,天津,重庆,广东,江苏,浙江,山东,安徽,河南,河北,辽宁,福建,四川,广西,湖南,湖北,陕西,贵州,吉林,江西,云南,山西,新疆,甘肃,海南,宁夏,香港,西藏,青海,台湾,澳门,黑龙江,内蒙古";
add2code1100="110101,110102,110103,110104,110105,110106,110107,110108,110109,110111,110112,110113,110114,110115,110116,110117,110228,110229";
add2name1100="东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山,海淀区,门头沟,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区,密云县,延庆县";
add2code3100="310101,310103,310104,310105,310106,310107,310108,310109,310110,310112,310113,310114,310115,310116,310117,310118,310119,310120,310230";
add2name3100="黄浦区,卢湾区,徐汇区,长宁区,静安区,普陀区,闸北区,虹口区,杨浦区,闵行区,宝山区,嘉定区,浦东区,金山区,松江区,青浦区,南汇区,奉贤区,崇明县";
add2code1200="120103,120101,120102,120104,120105,120106,120107,120108,120109,120110,120111,120112,120113,120114,120115,120221,120223,120225";
add2name1200="河西区,和平区,河东区,南开区,河北区,红桥区,塘沽区,汉沽区,大港区,东丽区,西青区,津南区,北辰区,武清区,宝坻区,宁河县,静海县,蓟县";
add2code5000="500101,500102,500103,500104,500105,500106,500107,500108,500109,500110,500111,500112,500113,500114,500115,500222,500223,500224,500225,500226,500227,500228,500229,500230,500231,500232,500233,500234,500235,500236,500237,500238,500240,500243,500242,500241,500384,500381,500382,500383";
add2name5000="万州区,涪陵区,渝中区,大渡口,江北区,沙坪坝,九龙坡,南岸区,北碚区,万盛区,双桥区,渝北区,巴南区,黔江区,长寿区,綦江县,潼南县,铜梁县,大足县,荣昌县,璧山县,梁平县,城口县,丰都县,垫江县,武隆县,忠县,开县,云阳县,奉节县,巫山县,巫溪县,石柱县,彭水县,酉阳县,秀山县,南川市,江津市,合川市,永川市";
add2code4400="441200,441300,441400,441500,441600,441700,441800,441900,442000,445100,445200,445300,440700,440600,440200,440500,440300,440400,440100,440900,440800";
add2name4400="肇庆,惠州,梅州,汕尾,河源,阳江,清远,东莞,中山,潮州,揭阳,云浮,江门,佛山,韶关,汕头,深圳,珠海,广州,茂名,湛江";
add2code3200="320100,320200,320300,320400,320500,320600,320700,320800,320900,321000,321100,321200,321300";
add2name3200="南京,无锡,徐州,常州,苏州,南通,连云港,淮安,盐城,扬州,镇江,泰州,宿迁";
add2code3300="330100,330200,330300,330400,330500,330600,330700,330800,330900,331000,331100";
add2name3300="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水";
add2code3700="370100,370200,370300,370400,370500,370600,370700,370800,370900,371000,371100,371200,371300,371400,371500,371600,371700";
add2name3700="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,荷泽";
add2code3400="340100,340200,340300,340400,340500,340600,340700,340800,341000,341100,341200,341300,341400,341500,341600,341700,341800";
add2name3400="合肥,芜湖,蚌埠,淮南,马鞍山,淮北,铜陵,安庆,黄山,滁州,阜阳,宿州,巢湖,六安,亳州,池州,宣城";
add2code4100="410100,410200,410300,410400,410500,410600,410700,410800,410900,411000,411100,411200,411300,411400,411500,411600,411700";
add2name4100="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店";
add2code1300="130100,130200,130300,130400,130500,130600,130700,130800,130900,131000,131100";
add2name1300="石家庄,唐山,秦皇岛,邯郸,邢台,保定,张家口,承德,沧州,廊坊,衡水";
add2code2100="210100,210200,210300,210400,210500,210600,210700,210800,210900,211000,211100,211200,211300,211400";
add2name2100="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛";
add2code3500="350200,350100,350300,350400,350500,350600,350700,350800,350900";
add2name3500="厦门,福州,莆田,三明,泉州,漳州,南平,龙岩,宁德";
add2code5100="510100,510300,510400,510500,510600,510700,510800,510900,511000,511100,511300,511400,511500,511600,511700,511800,511900,512000,513200,513300,513400";
add2name5100="成都,自贡,攀枝花,泸州,德阳,绵阳,广元,遂宁,内江,乐山,南充,眉山,宜宾,广安,达州,雅安,巴中,资阳,阿坝州,甘孜州,凉山州";
add2code4500="450100,450200,450300,450400,450500,450600,450700,450800,450900,451000";
add2name4500="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,百色";
add2code4300="430100,430200,430300,430400,430500,430600,430700,430800,430900,431000,431100,431200,431300,433100";
add2name4300="长沙,株洲,湘潭,衡阳,邵阳,岳阳,常德,张家界,益阳,郴州,永州,怀化,娄底,湘西";
add2code4200="420100,420200,420300,420500,420600,420700,420800,420900,421000,421100,421200,421300,422800,429021,429004,429005,429006";
add2name4200="武汉,黄石,十堰,宜昌,襄樊,鄂州,荆门,孝感,荆州,黄冈,咸宁,随州,恩施,神农架,仙桃,潜江,天门";
add2code6100="610100,610200,610300,610400,610500,610600,610700,610800,610900,611000";
add2name6100="西安,铜川,宝鸡,咸阳,渭南,延安,汉中,榆林,安康,商洛";
add2code5200="520100,520200,520300,520400,522200,522300,522400,522600,522700";
add2name5200="贵阳,六盘水,遵义,安顺,铜仁,黔西南州,毕节,黔东南州,黔南州";
add2code2200="220100,220200,220300,220400,220500,220600,220700,220800,222400";
add2name2200="长春,吉林,四平,辽源,通化,白山,松原,白城,延边";
add2code3600="360100,360200,360300,360400,360500,360600,360700,360800,360900,361000,361100";
add2name3600="南昌,景德镇,萍乡,九江,新余,鹰潭,赣州,吉安,宜春,抚州,上饶";
add2code5300="530100,530300,530400,530500,530600,532300,532500,532600,532700,532800,532900,533100,533200,533300,533400,533500";
add2name5300="昆明,曲靖,玉溪,保山,昭通,楚雄,红河,文山,思茅,西双版纳,大理,德宏,丽江,怒江,迪庆,临沧";
add2code1400="140100,140200,140300,140400,140500,140600,140700,140800,140900,141000,141100";
add2name1400="太原,大同,阳泉,长治,晋城,朔州,晋中,运城,忻州,临汾,吕梁";
add2code6500="650100,650200,652100,652200,652300,652700,652800,652900,653000,653100,653200,654000,654200,654300,659001,659002,659003,659004";
add2name6500="乌鲁木齐,克拉玛依,吐鲁番,哈密,昌吉,博尔塔拉,巴音郭楞,阿克苏,克孜勒苏柯尔克孜,喀什,和田,伊犁,塔城,阿勒泰,石河子,阿拉尔,图木舒克,五家渠";
add2code6200="620100,620200,620300,620400,620500,620600,620700,620800,620900,620981,620982,621000,621100,621200,622900,623000";
add2name6200="兰州,嘉峪关,金昌,白银,天水,武威,张掖,平凉,酒泉,玉门,敦煌,庆阳,定西,陇南,临夏,甘南";
add2code4600="460100,460200";
add2name4600="海口,三亚";
add2code6400="640100,640200,640300,640400,640500";
add2name6400="银川,石嘴山,吴忠,固原,中卫";
add2code8100="810100";
add2name8100="香港";
add2code5400="542600,540100,542100,542200,542300,542400,542500";
add2name5400="林芝,拉萨,昌都,山南,日喀则,那曲,阿里";
add2code6300="630100,632100,632200,632300,632500,632600,632700,632800";
add2name6300="西宁,海东,海北州,黄南州,海南州,果洛州,玉树州,海西州";
add2code7100="710100,710300,710400,710500,710600,710800,710900,711100,711200,711300,711400,711600,711800,712000,712100,712200,712300,712400,712500";
add2name7100="台北,基隆,宜兰,桃园,新竹,苗栗,台中,南投,彰化,云林,嘉义,台南,高雄,屏东,花莲,台东,澎湖,金门,连江";
add2code8200="820100";
add2name8200="澳门";
add2code2300="230100,230200,230300,230400,230500,230600,230700,230800,230900,231000,231100,231200,232700";
add2name2300="哈尔滨,齐齐哈尔,鸡西,鹤岗,双鸭山,大庆,伊春,佳木斯,七台河,牡丹江,黑河,绥化,大兴安岭";
add2code1500="150100,150200,150300,150400,150500,150600,150700,150800,150900,152200,152500,152900";
add2name1500="呼和浩特,包头,乌海,赤峰,通辽,鄂尔多斯,呼伦贝尔,巴彦淖尔,乌兰察布,兴安盟,锡林郭勒,阿拉善盟";
--------------------------------------------------------------------------------------------------------------------------------------------------

2 页面 及 js

<td height="20"><SPAN class="style3"><span class="hui_01">&nbsp;&nbsp;<SELECT id="ProvinceSelect" οnchange="get_add2_rad_list()" name="Select1">
                <OPTION value="" selected>请选择省...</OPTION>
               </SELECT>
               <INPUT id="Area" style="WIDTH: 3px; HEIGHT: 20px" type="hidden" size="1" name="Area"><SELECT id="CitySelect" style="VISIBILITY: hidden; WIDTH: 80px" οnchange="getCityFullName()"
                name="Select2">
                <OPTION selected>请选择市...</OPTION>
               </SELECT></span></SPAN></td>

3 从xml文件中读取省市名称并显示在select里面

//页面初始化

function init()  //在body onload 运行
{
     //alert("init");
 get_province_list();
}

//取得一级的地址列表
function get_province_list()
 {
  var ProvinceSelect = document.getElementById("ProvinceSelect");
  var zonelist = eval("add1name" + ".split(',')");
 var zcodelist = eval("add1code" + ".split(',')");
 while (ProvinceSelect.length > 1) ProvinceSelect.remove(1);
 for(var i=0; i<zonelist.length; i++)
 {
  var oOption = document.createElement("OPTION");
  oOption.text=zonelist[i];
  oOption.value=zcodelist[i];
  ProvinceSelect.add(oOption);  
 }

}
//---取得二级的地址列表---
function get_add2_rad_list()
{
 var ProvinceSelect = document.getElementById("ProvinceSelect");
 code = ProvinceSelect.options[ProvinceSelect.selectedIndex].value;
 var CitySelect = document.getElementById("CitySelect");
 while (CitySelect.length > 1) CitySelect.remove(1);
 if(code != "")
 {
  var zonelist = eval("add2name" + code + ".split(',')");
  var zcodelist = eval("add2code"  + code + ".split(',')");
  for(var i=0; i<zonelist.length; i++)
  {  
   var oOption = document.createElement("OPTION");
   oOption.text=zonelist[i];
   oOption.value=zcodelist[i];
   CitySelect.add(oOption);
  } 
 }
 getCityFullName();
}
//---获取城市名称---
function getCityFullName()
{
 var ProvinceSelect = document.getElementById("ProvinceSelect");
 var CitySelect = document.getElementById("CitySelect");
 var Area = document.getElementById("Area");
 var tmpstr = "";
 if(ProvinceSelect.selectedIndex > 0)
 {
  tmpstr = ProvinceSelect.options[ProvinceSelect.selectedIndex].text + " ";
 }
 if (CitySelect.selectedIndex > 0)
 {
  tmpstr += CitySelect.options[CitySelect.selectedIndex].text;
 }
 Area.value = tmpstr;
}

4 接收从数据库中读取的省 市 字段

function FillData(province,city)
{
 init1();
 var ProvinceSelect = document.getElementById("ProvinceSelect"); 
 var CitySelect = document.getElementById("CitySelect");
 for (i=0;i<ProvinceSelect.length;i++)
 {
  if (ProvinceSelect.options[i].text==province)
  {
   ProvinceSelect.selectedIndex = i;
   get_add2_rad_list();
   for (j = 0; j<CitySelect.length; j++)
   {
    if(CitySelect.options[j].text=city)
    {
     CitySelect.selectedIndex = j;
     break;
    }
   }
   break;
  } 
 }
 
}

5 后台向前台发送 js

private void Page_Load(object sender, System.EventArgs e)
  {
   

   if(!this.Page.IsPostBack)
   {
    Bind();
    //set the information  of a school
    this.LoadSchool(); // 这里面给 Province  和City 赋值

    // 用转义字符 拼成 “北京” “东城区” 的样式,因为FillData的参数必须带“”

    string province =@"""";
    province += Province ;
    province += @""""; 
    string city =@"""";
    city += City1 ;
    city += @""""; 
    string js1 = "<script language='javascript'>FillData("+province+","+city+");</script>";

    if(!this.IsClientScriptBlockRegistered("clientScript"))
     this.RegisterStartupScript("clientScript", js1);  // 会在页面的最后执行js1,开始运行用RegisterClientScriptBlock()
   }
  //  Submit1.Attributes.Add("onclick","return CheckInput()");
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值