zoukankan      html  css  js  c++  java
  • 无刷新联动下拉菜单(DotTextWeb版)

         无刷新联动菜单相信大家都听说或者掌握了,但是我一直没有解决的问题就是怎样获得被联动的下拉菜单的值。前几天下载了DotTextWeb,在Register.aspx里面突然发现了有这个东西,兴奋不已,于是就去看代码了,发现它用的是js,相信大家都看多XmlHTTPRequest实现的,我技术水平只能达到抄的水平,于是就没有深入的研究,这次让我看到了如此之好的代码,我就不能放过了,呵呵,
    以下代码需要了解js的基本和DOM的基础就可以了。
    首先和DotTextWeb一样,建立一个.ascx文件,里面的主要是放入两个联动的下拉列表
    代码如下:
      1<select name="shen" onChange="redirectff(this.options.selectedIndex)">
      2    <option value="直辖市"  selected>直辖市</option>
      3    <option value="湖北">湖北</option>
      4    <option value="河北">河北</option>
      5    <option value="山西">山西</option>
      6    <option value="内蒙古">内蒙古</option>
      7    <option value="辽宁">辽宁</option>
      8    <option value="吉林">吉林</option>
      9    <option value="黑龙江">黑龙江</option>
     10    <option value="江苏">江苏</option>
     11    <option value="浙江">浙江</option>
     12    <option value="安徽">安徽</option>
     13    <option value="福建">福建</option>
     14    <option value="江西">江西</option>
     15    <option value="山东">山东</option>
     16    <option value="河南">河南</option>
     17    <option value="海南">海南</option>
     18    <option value="广东">广东</option>
     19    <option value="广西">广西</option>
     20    <option value="湖南">湖南</option>
     21    <option value="四川">四川</option>
     22    <option value="贵州">贵州</option>
     23    <option value="云南">云南</option>
     24    <option value="西藏">西藏</option>
     25    <option value="陕西">陕西</option>
     26    <option value="甘肃">甘肃</option>
     27    <option value="宁夏">宁夏</option>
     28    <option value="青海">青海</option>
     29    <option value="新疆">新疆</option>
     30</select>
     31
     32<select name="city">
     33    <option value="北京">北京</option>
     34    <option value="上海">上海</option>
     35    <option value="天津">天津</option>
     36    <option value="重庆">重庆</option>
     37</select>
     38市 <font color="red">*</font>
     39<script language="JavaScript">
     40<!--  
     41var groups=document.frmRegister.shen.options.length;  
     42var group=new Array(groups); 
     43for (i=0; i<groups; i++)  
     44group[i]=new Array();
     45
     46group[0][0]=new Option("北京","北京");
     47group[0][1]=new Option("上海","上海");
     48group[0][2]=new Option("天津","天津");
     49group[0][3]=new Option("重庆","重庆");
     50group[1][0]=new Option("武汉","武汉");
     51group[1][1]=new Option("鄂州","鄂州");
     52group[1][2]=new Option("孝感","孝感");
     53group[1][3]=new Option("黄冈","黄冈");
     54group[1][4]=new Option("黄石","黄石");
     55group[1][5]=new Option("咸宁","咸宁");
     56group[1][6]=new Option("沙市","沙市");
     57group[1][7]=new Option("宜昌","宜昌");
     58group[1][8]=new Option("恩施","恩施");
     59group[1][9]=new Option("十堰","十堰");
     60group[1][10]=new Option("襄樊","襄樊");
     61group[1][11]=new Option("荆门","荆门");
     62group[2][0]=new Option("石家庄","石家庄");
     63group[2][1]=new Option("保定","保定");
     64group[2][2]=new Option("张家口","张家口");
     65group[2][3]=new Option("承德","承德");
     66group[2][4]=new Option("唐山","唐山");
     67group[2][5]=new Option("廊坊","廊坊");
     68group[2][6]=new Option("沧州","沧州");
     69group[2][7]=new Option("衡水","衡水");
     70group[2][8]=new Option("邢台","邢台");
     71group[2][9]=new Option("邯郸","邯郸");
     72group[2][10]=new Option("秦皇岛","秦皇岛");
     73group[3][0]=new Option("太原","太原");
     74group[3][1]=new Option("大同","大同");
     75group[3][2]=new Option("阳泉","阳泉");
     76group[3][3]=new Option("榆次","榆次");
     77group[3][4]=new Option("长治","长治");
     78group[3][5]=new Option("晋城","晋城");
     79group[3][6]=new Option("临汾","临汾");
     80group[3][7]=new Option("离石","离石");
     81group[3][8]=new Option("运城","运城");
     82group[3][9]=new Option("忻州","忻州");
     83group[4][0]=new Option("呼和浩特","呼和浩特");
     84group[4][1]=new Option("包头","包头");
     85group[4][2]=new Option("乌海","乌海");
     86group[4][3]=new Option("集宁","集宁");
     87group[4][4]=new Option("通辽","通辽");
     88group[4][5]=new Option("赤峰","赤峰");
     89group[4][6]=new Option("东胜","东胜");
     90group[4][7]=new Option("锡林浩特","锡林浩特");
     91group[4][8]=new Option("海拉尔","海拉尔");
     92group[5][0]=new Option("沈阳","沈阳");
     93group[5][1]=new Option("大连","大连");
     94group[5][2]=new Option("瓦房店","瓦房店");
     95group[5][3]=new Option("鞍山","鞍山");
     96group[5][4]=new Option("抚顺","抚顺");
     97group[5][5]=new Option("本溪","本溪");
     98group[5][6]=new Option("丹东","丹东");
     99group[5][7]=new Option("锦州","锦州");
    100group[5][8]=new Option("营口","营口");
    101group[5][9]=new Option("阜新","阜新");
    102group[5][10]=new Option("辽阳","辽阳");
    103group[5][11]=new Option("铁岭","铁岭");
    104group[6][0]=new Option("长春","长春");
    105group[6][1]=new Option("吉林","吉林");
    106group[6][2]=new Option("延吉","延吉");
    107group[6][3]=new Option("四平","四平");
    108group[6][4]=new Option("通化","通化");
    109group[6][5]=new Option("白城","白城");
    110group[6][6]=new Option("辽源","辽源");
    111group[6][7]=new Option("前郭","前郭");
    112group[6][8]=new Option("浑江","浑江");
    113group[6][9]=new Option("梅河口","梅河口");
    114group[7][0]=new Option("哈尔滨","哈尔滨");
    115group[7][1]=new Option("齐齐哈尔","齐齐哈尔");
    116group[7][2]=new Option("牡丹江","牡丹江");
    117group[7][3]=new Option("佳木斯","佳木斯");
    118group[7][4]=new Option("绥化","绥化");
    119group[7][5]=new Option("黑河","黑河");
    120group[7][6]=new Option("加格达其","加格达其");
    121group[7][7]=new Option("伊春","伊春");
    122group[7][8]=new Option("大庆","大庆");
    123group[7][9]=new Option("阿城","阿城");
    124group[8][0]=new Option("南京","南京");
    125group[8][1]=new Option("镇江","镇江");
    126group[8][2]=new Option("南通","南通");
    127group[8][3]=new Option("苏州","苏州");
    128group[8][4]=new Option("扬州","扬州");
    129group[8][5]=new Option("盐城","盐城");
    130group[8][6]=new Option("徐州","徐州");
    131group[8][7]=new Option("淮阴","淮阴");
    132group[8][8]=new Option("连云港","连云港");
    133group[8][9]=new Option("常州","常州");
    134group[8][10]=new Option("无锡","无锡");
    135group[8][11]=new Option("常熟","常熟");
    136group[8][12]=new Option("张家港","张家港");
    137group[9][0]=new Option("杭州","杭州");
    138group[9][1]=new Option("湖州","湖州");
    139group[9][2]=new Option("嘉兴","嘉兴");
    140group[9][3]=new Option("宁波","宁波");
    141group[9][4]=new Option("绍兴","绍兴");
    142group[9][5]=new Option("临海","临海");
    143group[9][6]=new Option("温州","温州");
    144group[9][7]=new Option("丽水","丽水");
    145group[9][8]=new Option("金华","金华");
    146group[9][9]=new Option("衢州","衢州");
    147group[10][0]=new Option("合肥","合肥");
    148group[10][1]=new Option("蚌埠","蚌埠");
    149group[10][2]=new Option("芜湖","芜湖");
    150group[10][3]=new Option("马鞍山","马鞍山");
    151group[10][4]=new Option("安庆","安庆");
    152group[10][5]=new Option("宿县","宿县");
    153group[10][6]=new Option("阜阳","阜阳");
    154group[10][7]=new Option("黄山","黄山");
    155group[10][8]=new Option("滁州","滁州");
    156group[10][9]=new Option("淮北","淮北");
    157group[10][10]=new Option("铜陵","铜陵");
    158group[10][11]=new Option("宣城","宣城");
    159group[10][12]=new Option("六安","六安");
    160group[10][13]=new Option("巢湖","巢湖");
    161group[11][0]=new Option("福州","福州");
    162group[11][1]=new Option("厦门","厦门");
    163group[11][2]=new Option("宁德","宁德");
    164group[11][3]=new Option("莆田","莆田");
    165group[11][4]=new Option("泉州","泉州");
    166group[11][5]=new Option("漳州","漳州");
    167group[11][6]=new Option("龙岩","龙岩");
    168group[11][7]=new Option("三明","三明");
    169group[11][8]=new Option("南平","南平");
    170group[12][0]=new Option("南昌","南昌");
    171group[12][1]=new Option("九江","九江");
    172group[12][2]=new Option("上饶","上饶");
    173group[12][3]=new Option("陵川","陵川");
    174group[12][4]=new Option("宜春","宜春");
    175group[12][5]=new Option("吉安","吉安");
    176group[12][6]=new Option("赣州","赣州");
    177group[12][7]=new Option("景德镇","景德镇");
    178group[12][8]=new Option("萍乡","萍乡");
    179group[12][9]=new Option("分宜","分宜");
    180group[13][0]=new Option("济南","济南");
    181group[13][1]=new Option("青岛","青岛");
    182group[13][2]=new Option("淄博","淄博");
    183group[13][3]=new Option("德州","德州");
    184group[13][4]=new Option("烟台","烟台");
    185group[13][5]=new Option("潍坊","潍坊");
    186group[13][6]=new Option("济宁","济宁");
    187group[13][7]=new Option("泰安","泰安");
    188group[13][8]=new Option("荷泽","荷泽");
    189group[13][9]=new Option("威海","威海");
    190group[13][10]=new Option("日照","日照");
    191group[13][11]=new Option("临沂","临沂");
    192group[13][12]=new Option("聊城","聊城");
    193group[14][0]=new Option("郑州","郑州");
    194group[14][1]=new Option("安阳","安阳");
    195group[14][2]=new Option("新乡","新乡");
    196group[14][3]=new Option("许昌","许昌");
    197group[14][4]=new Option("平顶山","平顶山");
    198group[14][5]=new Option("信阳","信阳");
    199group[14][6]=new Option("南阳","南阳");
    200group[14][7]=new Option("开封","开封");
    201group[14][8]=new Option("洛阳","洛阳");
    202group[14][9]=new Option("商丘","商丘");
    203group[14][10]=new Option("焦作","焦作");
    204group[14][11]=new Option("鹤壁","鹤壁");
    205group[14][12]=new Option("濮阳","濮阳");
    206group[14][13]=new Option("周口","周口");
    207group[14][14]=new Option("漯河","漯河");
    208group[14][15]=new Option("驻马店","驻马店");
    209group[14][16]=new Option("三门峡","三门峡");
    210group[15][0]=new Option("海口","海口");
    211group[15][1]=new Option("三亚","三亚");
    212group[15][2]=new Option("儋县","儋县");
    213group[16][0]=new Option("河源","河源");
    214group[16][1]=new Option("中山","中山");
    215group[16][2]=new Option("顺德","顺德");
    216group[16][3]=new Option("东莞","东莞");
    217group[16][4]=new Option("江门","江门");
    218group[16][5]=new Option("湛江","湛江");
    219group[16][6]=new Option("肇庆","肇庆");
    220group[16][7]=new Option("佛山","佛山");
    221group[16][8]=new Option("珠海","珠海");
    222group[16][9]=new Option("深圳","深圳");
    223group[16][10]=new Option("汕头","汕头");
    224group[16][11]=new Option("梅州","梅州");
    225group[16][12]=new Option("广州","广州");
    226group[16][13]=new Option("韶关","韶关");
    227group[16][14]=new Option("惠州","惠州");
    228group[16][15]=new Option("英德","英德");
    229group[16][16]=new Option("潮州","潮州");
    230group[16][17]=new Option("惠来","惠来");
    231group[16][18]=new Option("茂名","茂名");
    232group[17][0]=new Option("南宁","南宁");
    233group[17][1]=new Option("柳州","柳州");
    234group[17][2]=new Option("桂林","桂林");
    235group[17][3]=new Option("梧州","梧州");
    236group[17][4]=new Option("玉林","玉林");
    237group[17][5]=new Option("钦州","钦州");
    238group[17][6]=new Option("河池","河池");
    239group[17][7]=new Option("北海","北海");
    240group[17][8]=new Option("防城","防城");
    241group[18][0]=new Option("长沙","长沙");
    242group[18][1]=new Option("湘潭","湘潭");
    243group[18][2]=new Option("株州","株州");
    244group[18][3]=new Option("衡阳","衡阳");
    245group[18][4]=new Option("郴州","郴州");
    246group[18][5]=new Option("常德","常德");
    247group[18][6]=new Option("益阳","益阳");
    248group[18][7]=new Option("娄底","娄底");
    249group[18][8]=new Option("邵阳","邵阳");
    250group[18][9]=new Option("岳阳","岳阳");
    251group[18][10]=new Option("怀化","怀化");
    252group[19][0]=new Option("成都","成都");
    253group[19][1]=new Option("攀枝花","攀枝花");
    254group[19][2]=new Option("自贡","自贡");
    255group[19][3]=new Option("永川","永川");
    256group[19][4]=new Option("温江","温江");
    257group[19][5]=new Option("绵阳","绵阳");
    258group[19][6]=new Option("南充","南充");
    259group[19][7]=new Option("达县","达县");
    260group[19][8]=new Option("万县市","万县市");
    261group[19][9]=new Option("涪陵","涪陵");
    262group[19][10]=new Option("沪州","沪州");
    263group[19][11]=new Option("宜宾","宜宾");
    264group[19][12]=new Option("内江","内江");
    265group[19][13]=new Option("乐山","乐山");
    266group[19][14]=new Option("西昌","西昌");
    267group[19][15]=new Option("雅安","雅安");
    268group[19][16]=new Option("马尔康","马尔康");
    269group[19][17]=new Option("德阳","德阳");
    270group[19][18]=new Option("广元","广元");
    271group[20][0]=new Option("贵阳","贵阳");
    272group[20][1]=new Option("遵义","遵义");
    273group[20][2]=new Option("安顺","安顺");
    274group[20][3]=new Option("都匀","都匀");
    275group[20][4]=new Option("凯里","凯里");
    276group[20][5]=new Option("铜仁","铜仁");
    277group[20][6]=new Option("毕节","毕节");
    278group[20][7]=new Option("六盘水","六盘水");
    279group[20][8]=new Option("兴义","兴义");
    280group[21][0]=new Option("昆明","昆明");
    281group[21][1]=new Option("大理","大理");
    282group[21][2]=new Option("个旧","个旧");
    283group[21][3]=new Option("曲靖","曲靖");
    284group[21][4]=new Option("保山","保山");
    285group[21][5]=new Option("文山","文山");
    286group[21][6]=new Option("玉溪","玉溪");
    287group[21][7]=new Option("楚雄","楚雄");
    288group[21][8]=new Option("思茅","思茅");
    289group[21][9]=new Option("昭通","昭通");
    290group[22][0]=new Option("拉萨","拉萨");
    291group[23][0]=new Option("西安","西安");
    292group[23][1]=new Option("延安","延安");
    293group[23][2]=new Option("榆林","榆林");
    294group[23][3]=new Option("商州","商州");
    295group[23][4]=new Option("安康","安康");
    296group[23][5]=new Option("汉中","汉中");
    297group[23][6]=new Option("宝鸡","宝鸡");
    298group[23][7]=new Option("铜川","铜川");
    299group[23][8]=new Option("咸阳","咸阳");
    300group[23][9]=new Option("长安","长安");
    301group[24][0]=new Option("兰州","兰州");
    302group[24][1]=new Option("定西","定西");
    303group[24][2]=new Option("平凉","平凉");
    304group[24][3]=new Option("西峰","西峰");
    305group[24][4]=new Option("武威","武威");
    306group[24][5]=new Option("张掖","张掖");
    307group[24][6]=new Option("酒泉","酒泉");
    308group[24][7]=new Option("天水","天水");
    309group[24][8]=new Option("成都","成都");
    310group[24][9]=new Option("林夏","林夏");
    311group[25][0]=new Option("银川","银川");
    312group[25][1]=new Option("石嘴山","石嘴山");
    313group[25][2]=new Option("吴忠","吴忠");
    314group[25][3]=new Option("固原","固原");
    315group[26][0]=new Option("西宁","西宁");
    316group[26][1]=new Option("平安","平安");
    317group[26][2]=new Option("同仁","同仁");
    318group[26][3]=new Option("共和","共和");
    319group[26][4]=new Option("德令哈","德令哈");
    320group[26][5]=new Option("门源","门源");
    321group[26][6]=new Option("格尔木","格尔木");
    322group[27][0]=new Option("乌鲁木齐","乌鲁木齐");
    323group[27][1]=new Option("奎屯","奎屯");
    324group[27][2]=new Option("石河子","石河子");
    325group[27][3]=new Option("昌吉","昌吉");
    326group[27][4]=new Option("吐鲁番","吐鲁番");
    327group[27][5]=new Option("库尔勒","库尔勒");
    328group[27][6]=new Option("阿克苏","阿克苏");
    329group[27][7]=new Option("喀什","喀什");
    330group[27][8]=new Option("伊犁","伊犁");
    331group[27][9]=new Option("克拉玛依","克拉玛依");
    332  
    333var tempff=document.frmRegister.city;
    334 
    335function redirectff(x){      
    336    for (m=tempff.options.length-1;m>0;m--)  
    337        tempff.options[m]=null;  
    338    for (i=0;i<group[x].length;i++){  
    339        tempff.options[i]=new Option(group[x][i].text,group[x][i].value);  
    340    }
      
    341    tempff.options[0].selected=true;  
    342}
      
    343 
    344//-->  
    345</script>
    当name为shen的select改变时发生redirectff时间,name为city,注意这里的city,是第二个select的name属性值,在以后有很到的用途。它就会产生相应的下拉列表。
    然后建立一个.aspx文件,把.ascx拖入到其中,暂时放入一个button按钮
    现在就让我产生button1.click()事件
    为了得到第二个下拉列表(name="city")的值,在button1.click()事件当中插入以下代码
    1Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    2        Dim s As String = Request.Form.Get("city")
    3        Response.Write(s)
    4    End Sub
    最关键的当然是Request.Form.Get("city")了,输出一下,这样就可以得到city所选的值了
    以前总是不知道怎么得到第二个下拉列表的值,现在明白了,利用Request.Form.Get("city")得到客户端的city的值或者Request.Form("city")都可以。
  • 相关阅读:
    MATLAB符号运算(2)
    ruby的字符串
    MATLAB符号运算(3)
    ruby的lambda
    MATLAB概率统计函数(2)
    ruby的迭代
    MATLAB优化问题(2)
    ruby的方法和block
    MATLAB优化问题(1)
    ruby的正则表达式操作(3)
  • 原文地址:https://www.cnblogs.com/xucanzhao/p/246163.html
Copyright © 2011-2022 走看看