.net和javascript 结合 ,生成三级联动无刷新下拉菜单

step1:首先生成一个area.js

  1//国家列表
  2var nation= new Array();
  3nation[0] = new Array('0','1','阿尔巴尼亚');
  4nation[1] = new Array('0','2','阿尔及利亚');
  5nation[2] = new Array('0','3','阿富汗');
  6nation[3] = new Array('0','4','阿根廷');
  7nation[4] = new Array('0','5','阿拉伯联合酋长国');
  8nation[5] = new Array('0','6','阿鲁巴');
  9nation[6] = new Array('0','7','阿曼');
 10nation[7] = new Array('0','8','阿塞拜疆');
 11nation[8] = new Array('0','9','埃及');
 12nation[9] = new Array('0','10','埃塞俄比亚');
 13nation[10] = new Array('0','11','爱尔兰');
 14nation[11] = new Array('0','12','爱沙尼亚');
 15nation[12] = new Array('0','13','安道尔');
 16nation[13] = new Array('0','14','安哥拉');
 17nation[14] = new Array('0','15','安圭拉岛');
 18nation[15] = new Array('0','16','安提瓜和巴布达');
 19nation[16] = new Array('0','17','奥地利');
 20nation[17] = new Array('0','18','澳大利亚');
 21nation[18] = new Array('0','19','澳门特别行政区');
 22nation[19] = new Array('0','20','巴巴多斯');
 23nation[20] = new Array('0','21','巴布亚新几内亚');
 24nation[21] = new Array('0','22','巴哈马');
 25nation[22] = new Array('0','23','巴基斯坦');
 26nation[23] = new Array('0','24','巴拉圭');
 27nation[24] = new Array('0','25','巴林');
 28nation[25] = new Array('0','26','巴拿马');
 29nation[26] = new Array('0','27','巴西');
 30nation[27] = new Array('0','28','白俄罗斯');
 31nation[28] = new Array('0','29','百慕大群岛');
 32nation[29] = new Array('0','30','保加利亚');
 33nation[30] = new Array('0','31','北马里亚纳群岛');
 34nation[31] = new Array('0','32','贝宁');
 35nation[32] = new Array('0','33','比利时');
 36nation[33] = new Array('0','34','冰岛');
 37nation[34] = new Array('0','35','波多黎各');
 38nation[35] = new Array('0','36','波兰');
 39nation[36] = new Array('0','37','波斯尼亚和黑塞哥维那');
 40nation[37] = new Array('0','38','玻利维亚');
 41nation[38] = new Array('0','39','伯利兹');
 42nation[39] = new Array('0','40','博茨瓦纳');
 43nation[40] = new Array('0','41','不丹');
 44
 45
 46
 47//省份列表
 48var province = new Array();
 49province[0]  = new Array('236','238','安徽');
 50province[1]  = new Array('236','2948','澳门');
 51province[2]  = new Array('236','239','北京');
 52province[3]  = new Array('236','241','福建');
 53province[4]  = new Array('236','242','甘肃');
 54province[5]  = new Array('236','243','广东');
 55province[6]  = new Array('236','244','广西');
 56province[7]  = new Array('236','245','贵州');
 57province[8]  = new Array('236','246','海南');
 58province[9]  = new Array('236','247','河北');
 59province[10]  = new Array('236','248','河南');
 60province[11]  = new Array('236','249','黑龙江');
 61province[12]  = new Array('236','250','湖北');
 62province[13]  = new Array('236','251','湖南');
 63province[14]  = new Array('236','252','吉林');
 64province[15]  = new Array('236','253','江苏');
 65province[16]  = new Array('236','254','江西');
 66province[17]  = new Array('236','255','辽宁');
 67province[18]  = new Array('236','256','内蒙古');
 68province[19]  = new Array('236','257','宁夏');
 69province[20]  = new Array('236','258','青海');
 70province[21]  = new Array('236','259','山东');
 71province[22]  = new Array('236','260','山西');
 72province[23]  = new Array('236','261','陕西');
 73province[24]  = new Array('236','262','上海');
 74province[25]  = new Array('236','263','四川');
 75province[26]  = new Array('236','2949','台湾');
 76province[27]  = new Array('236','264','天津');
 77province[28]  = new Array('236','265','西藏');
 78province[29]  = new Array('236','2947','香港');
 79province[30]  = new Array('236','266','新疆');
 80province[31]  = new Array('236','267','云南');
 81province[32]  = new Array('236','268','浙江');
 82province[33]  = new Array('236','240','重庆');
 83
 84
 85
 86
 87
 88//市级列表
 89var city= new Array();
 90city[0] = new Array('251','1645','永州','425000','0746');
 91city[1] = new Array('263','2468','广元','628000','0839');
 92city[2] = new Array('240','2946','万州区','401420','023');
 93city[3] = new Array('2947','2950','湾仔区','','00852');
 94city[4] = new Array('2947','2951','东区','','00852');
 95city[5] = new Array('2947','2952','中西区','','00852');
 96city[6] = new Array('2947','2953','南 区','','00852');
 97city[7] = new Array('2947','2954','北 区','','00852');
 98city[8] = new Array('2947','2955','九龙城区','','00852');
 99city[9] = new Array('2949','2956','台北市','222','2');
100city[10] = new Array('2949','2957','高雄市','800','7');
101city[11] = new Array('2949','2958','台中市','400','42');
102city[12] = new Array('2949','2959','台南市','700','62');
103city[13] = new Array('2949','2960','基隆市','200','32');
104city[14] = new Array('2949','2961','新竹市','300','35');
105city[15] = new Array('2949','2962','嘉义市','600','52');
106city[16] = new Array('2949','2963','台北县','222','2');
107city[17] = new Array('2949','2964','宜兰县','','');
108city[18] = new Array('2949','2965','桃园县','','');
109city[19] = new Array('2949','2966','新竹县','300','35');
110city[20] = new Array('2949','2967','苗栗县','','');
111city[21] = new Array('2949','2968','台中县','400','42');
112city[22] = new Array('2949','2975','高雄县','800','7');
113city[23] = new Array('2949','2970','彰化县','','');
114city[24] = new Array('2949','2971','南投县','','');
115city[25] = new Array('2949','2972','云林县','','');
116city[26] = new Array('2949','2973','嘉义县','600','52');
117city[27] = new Array('2949','2974','台南县','700','62');
118city[28] = new Array('2949','2976','屏东县','','');
119city[29] = new Array('2949','2977','台东县','','');
120city[30] = new Array('2949','2978','花莲县','','');
121city[31] = new Array('2949','2979','澎湖县','','');
122city[32] = new Array('2947','2982','观塘区','','00852');
123city[33] = new Array('2947','2983','油尖旺区','','00852');
124city[34] = new Array('2947','2984','深水埗区','','00852');
125city[35] = new Array('2947','2985','葵青区','','00852');
126city[36] = new Array('2947','2986','沙田区','','00852');
127city[37] = new Array('2947','2987','黄大仙区','','00852');
128city[38] = new Array('2947','2988','荃湾区','','00852');
129city[39] = new Array('2947','2989','元朗区','','00852');
130city[40] = new Array('2947','2990','屯门区','','00852');
131city[41] = new Array('2947','2991','离岛区','','00852');
132city[42] = new Array('2947','2992','西贡区','','00852');
133city[43] = new Array('2947','2993','大埔区','','00852');
134city[44] = new Array('2948','2994','澳门半岛','','00853');
135city[45] = new Array('2948','2995','凼仔','','00853');
136city[46] = new Array('2948','2996','路环','','00853');
137city[47] = new Array('238','272','安庆','246000','0556');
138city[48] = new Array('238','273','蚌埠','233000','0552');
139city[49] = new Array('238','274','巢湖','238000','0565');
140city[50] = new Array('238','275','池州','','');
141city[51] = new Array('238','276','滁州','239000','0550');
142city[52] = new Array('238','277','阜阳','236000','0558');
143city[53] = new Array('238','278','合肥','230000','0551');
144city[54] = new Array('238','279','淮北','235000','0561');
145city[55] = new Array('238','280','淮南','232000','0554');
146city[56] = new Array('238','281','黄山','245000','0559');
147city[57] = new Array('238','282','六安','237000','0564');
148city[58] = new Array('238','283','马鞍山','243000','0555');
149city[59] = new Array('238','284','宿州','234000','0557');
150city[60] = new Array('238','285','铜陵','244000','0562');
151city[61] = new Array('238','286','芜湖','241000','0553');
152city[62] = new Array('238','287','宣城','242000','0563');
153city[63] = new Array('238','288','亳州','236802','');
154city[64] = new Array('239','289','东城区','100007','010');
155city[65] = new Array('241','290','福州','350000','0591');
156city[66] = new Array('241','291','龙岩','364000','0597');
157city[67] = new Array('241','292','南平','353000','0599');
158city[68] = new Array('241','293','宁德','352100','0593');
159city[69] = new Array('241','294','莆田','351100','0594');
160city[70] = new Array('241','295','泉州','362000','0595');
161city[71] = new Array('241','296','三明','365000','0598');
162city[72] = new Array('241','297','厦门','361000','0592');
163city[73] = new Array('241','298','漳州','363000','0596');
164city[74] = new Array('242','299','白银','730900','0943');
165city[75] = new Array('242','300','定西','743000','0932');
166city[76] = new Array('242','301','甘南藏族自治州','747000','09411');
167city[77] = new Array('242','302','嘉峪关','735100','0937');
168city[78] = new Array('242','303','金昌','733000','0935');
169city[79] = new Array('242','304','酒泉','735000','0937');
170city[80] = new Array('242','305','兰州','730000','0931');
171city[81] = new Array('242','306','临夏回族自治州','731800','09401');
172city[82] = new Array('242','307','陇南','','');
173city[83] = new Array('242','308','平凉','744000','0943');
174city[84] = new Array('242','309','庆阳','745100','09441');
175city[85] = new Array('242','310','天水','741000','0938');
176city[86] = new Array('242','311','武威','733000','');
177city[87] = new Array('242','312','张掖','734000','0936');
178city[88] = new Array('243','313','潮州','515600','0768');
179city[89] = new Array('243','314','东莞','511700','0769');
180city[90] = new Array('243','315','佛山','528000','0757');
181city[91] = new Array('243','316','广州','510000','020');
182city[92] = new Array('243','317','河源','517000','0762');
183city[93] = new Array('243','318','惠州','516000','0752');
184city[94] = new Array('243','319','江门','529000','0750');
185city[95] = new Array('243','320','揭阳','515500','0663');
186city[96] = new Array('243','321','茂名','525000','0668');
187city[97] = new Array('243','322','梅州','514000','0753');
188city[98] = new Array('243','323','清远','511500','0763');
189city[99] = new Array('243','324','汕头','515000','0754');
190city[100] = new Array('243','325','汕尾','516600','0660');
191
192
193
194/*更多城市 ,不一一列出*/
195
196
197
198
199var PostCode,TelCode;
200PostCode='';
201TelCode='';
202function CreateNationID(targForm){//生成国家级分类 
203    var targ=targForm.NationID;
204    targ.length = 0;
205    targ.options[targ.length] = new Option('选择国家','0');
206    for(i=0; i<nation.length; i++){
207        targ.options[targ.length] = new Option(nation[i][2], nation[i][1]);
208    }
209    targ.selectedIndex=236    //选定中国
210}
211
212function CreateProvinceID(targForm){//生成省级分类 targForm为目标表单
213    var parent=targForm.NationID;
214    var subfield=targForm.ProvinceID;
215    var classid;
216    if(parent.length>0)
217    classid=parent.options[parent.selectedIndex].value
218    else
219    classid=parent.value;
220    subfield.length = 0;
221    subfield.options[subfield.length] = new Option('选择省份','0');
222    for (i=0; i < province.length; i++){
223        if (province[i][0] == classid){
224            subfield.options[subfield.length] = new Option(province[i][2], province[i][1]);
225        }
226    }
227}
228
229function CreateCityID(targForm){//生成市级分类
230    var subfield=targForm.CityID;
231    var classid=targForm.ProvinceID.options[targForm.ProvinceID.selectedIndex].value;
232    subfield.length = 0;
233    subfield.options[subfield.length] = new Option('选择城市','0');
234    for (i=0; i < city.length; i++){
235        if (city[i][0] == classid){
236            subfield.options[subfield.length] = new Option(city[i][2], city[i][1]);
237        }
238    }
239}
240
241function CreateCountyID(targForm){//生成区县级分类
242    var subfield=targForm.CountyID;
243    var classid=targForm.CityID.options[targForm.CityID.selectedIndex].value;
244    subfield.length = 0;
245    subfield.options[subfield.length] = new Option('选择区县','0');
246    for (i=0; i < county.length; i++){
247        if (county[i][0] == classid){
248            subfield.options[subfield.length] = new Option(county[i][2], county[i][1]);
249        }
250    }
251}
252
253
254function CreatePostTelCode(targForm) {//生成邮编、区号
255    var classid=targForm.CityID.options[targForm.CityID.selectedIndex].value;    
256    for (i=0; i < city.length; i++){
257        if (city[i][1] == classid){
258            PostCode=city[i][3];
259            TelCode=city[i][4];
260            break;
261        }
262    }
263}



ClassChange.js 


function CreateRootID(targForm){//生成省级分类 targForm为目标表单
    var parent=targForm.NationID;
    
var subfield=targForm.RootID;
    
var classid;
    
if(parent.length>0)
    classid
=parent.options[parent.selectedIndex].value
    
else
    classid
=parent.value;
    subfield.length 
= 0;
    subfield.options[subfield.length] 
= new Option('选择省份','0');
    
for (i=0; i < province.length; i++){
        
if (Root[i][0== classid){
            subfield.options[subfield.length] 
= new Option(Root[i][2], Root[i][1]);
        }

    }

}


function CreateClassID(targForm){//生成市级分类
    var subfield=targForm.ClassID;
    
var classid=targForm.RootID.options[targForm.RootID.selectedIndex].value;
    subfield.length 
= 0;
    subfield.options[subfield.length] 
= new Option('选择城市','0');
    
for (i=0; i < Class.length; i++){
        
if (Class[i][0== classid){
            subfield.options[subfield.length] 
= new Option(Class[i][2], Class[i][1]);
        }

    }

}


function CreateKindID(targForm){//生成区县级分类
    var subfield=targForm.KindID;
    
var classid=targForm.ClassID.options[targForm.ClassID.selectedIndex].value;
    subfield.length 
= 0;
    subfield.options[subfield.length] 
= new Option('选择区县','0');
    
for (i=0; i < Kind.length; i++){
        
if (Kind[i][0== classid){
            subfield.options[subfield.length] 
= new Option(Kind[i][2], Kind[i][1]);
        }

    }

}






classFunction.js


function CreateRootID(targForm,sType){//生成一级分类 targForm为目标表单
    var targ=targForm.RootID;
    targ.length 
= 0;
    targ.options[targ.length] 
= new Option('一级分类','');
    
for(i=0; i<Root.length; i++){
        
if (Root[i][0== sType){
            targ.options[targ.length] 
= new Option(Root[i][2], Root[i][1]);
        }

    }

}


function CreateClassID(targForm){//生成二级分类 targForm为目标表单
    var parent=targForm.RootID;
    
var subfield=targForm.ClassID;
    
var classid;
    classid
=parent.options[parent.selectedIndex].value;
    subfield.length 
= 0;
    subfield.options[subfield.length] 
= new Option('二级分类','');
    
for (i=0; i < Class.length; i++){
        
if (Class[i][0== classid){
            subfield.options[subfield.length] 
= new Option(Class[i][2], Class[i][1]);
        }

    }

}

function CreateKindID(targForm){//生成三级分类 targForm为目标表单
    var parent=targForm.ClassID;
    
var subfield=targForm.KindID;
    
var classid;
    classid
=parent.options[parent.selectedIndex].value;
    subfield.length 
= 0;
    subfield.options[subfield.length] 
= new Option('三级分类','');
    
for (i=0; i < Kind.length; i++){
        
if (Kind[i][0== classid){
            subfield.options[subfield.length] 
= new Option(Kind[i][2], Kind[i][1]);
        }

    }

}



然后就是调用这几个js文件了

在default.aspx页面中


<%@ Page language="c#" Codebehind="index.aspx.cs" AutoEventWireup="false" Inherits="CnTvS.Admin.Product.index1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    
<HEAD>
        
<title>index</title>
        
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        
<meta content="C#" name="CODE_LANGUAGE">
        
<meta content="JavaScript" name="vs_defaultClientScript">
        
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        
<script src="/CnTvS/Js/classFunction.js" type="text/javascript"></script>
        
<script src="CreateJs.js" type="text/javascript"></script>
        
</HEAD>
        
<body MS_POSITIONING="GridLayout">
        
<form id="composeform" method="post" runat="server">
        
<table class="table" id="Table2" cellSpacing="1" cellPadding="5" width="100%" border="0">
            
<TBODY>
                
<tr class="xingmu">
                    
<td align="center" colSpan="4">搜索、添加</td>
                
</tr>
                
<tr class="back">
                    
<td style="WIDTH: 92px" align="right">分类:</td>
                    
<td style="WIDTH: 279px">
                        
<select name="RootID" id="RootID" onchange="CreateClassID(this.form);this.form.KindID.length=1;">
                            
<option value="" selected>一级分类</option>
                        
</select>
                        
<select name="ClassID" id="ClassID" onchange="CreateKindID(this.form);">
                            
<option value="" selected>二级分类</option>
                        
</select>
                        
<select name="KindID" id="KindID">
                            
<option value="" selected>三级分类</option>
                        
</select>
                    
</td>
                    
                
</tr>
                
            
</TBODY>
        
</table>
        
</form>
        
<script type="text/javascript">
         
<!--
        tf
=document.composeform;
        CreateRootID(tf,
1);
        CreateClassID(tf);
        CreateKindID(tf);
    
         
//-->
        
</script>
</form>
</body>
</HTML>


注意这里用的是由html控件转到的服务器端控件  这样用控件的好处是可以比较灵活的调用js,又能在后台文件中获得值
在cs文件中必须要使用request来得到值


前面大家都说有问题,但是这个东西一直是我们用的 ,所以也没有怎么仔细看,昨天看了下,才发现确实有点问题
修改版本 http://www.cnblogs.com/Caceolod/articles/921974.html


posted @ 2007-04-29 17:05  海底的鱼  阅读(1495)  评论(6)    收藏  举报