.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