无刷新联动下拉菜单(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")都可以。
posted @   徐灿钊Asp.net专栏  阅读(3279)  评论(6)  编辑  收藏  举报
点击右上角即可分享
微信分享提示