asp.net DropDownList實現二級聯動效果

最近在做新聞發布系統的時候，用到了二級聯動，我把使用方法記錄下來，以便日後查閱以及幫助新手朋友們。下面是效果圖：

下面來講解一下實現的方法：

1.在.aspx頁面中，拖入兩個DroDownList控件。代碼如下：

<tr>
  <td>新聞風格：</td>
  <td><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"onselectedindexchanged="DropDownList1_SelectedIndexChanged" ></asp:DropDownList>
  </td>
</tr>
<tr>
  <td>新聞類型：</td>
  <td><asp:DropDownList ID="DropDownList2" runat="server">/asp:DropDownList>
  </td>
</tr>

2.aspx.cs頁面中的代碼如下：

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class release_News : System.Web.UI.Page
{
  protected void DropdownList1()
  {
    DropDownList1.Items.Add(new ListItem("新聞動態"));
    DropDownList1.Items.Add(new ListItem("政務公開"));
    DropDownList1.Items.Add(new ListItem("網上辦事"));
  }
  protected void DropdownList2()
  {
    switch (DropDownList1.SelectedValue)
    {
      case "新聞動態":
        DropDownList2.Items.Clear();
        DropDownList2.Items.Add(new ListItem("工作動態"));
        DropDownList2.Items.Add(new ListItem("公示公告"));
        DropDownList2.Items.Add(new ListItem("經濟新聞"));
        DropDownList2.Items.Add(new ListItem("省內新聞"));
        DropDownList2.Items.Add(new ListItem("熱點新聞"));
        break;
      case "政務公開":
        DropDownList2.Items.Clear();
        DropDownList2.Items.Add(new ListItem("領導班子"));
        DropDownList2.Items.Add(new ListItem("機構設置"));
        DropDownList2.Items.Add(new ListItem("計劃規劃"));
        break;
      case "網上辦事":
        DropDownList2.Items.Clear();
        DropDownList2.Items.Add(new ListItem("崗位職責"));
        DropDownList2.Items.Add(new ListItem("辦事流程"));
        break;
    }
  }
  protected void Page_Load(object sender, EventArgs e)
  {
     if (!IsPostBack)
    {
      DropdownList1();
      DropdownList2();
    }
  }
  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
  {
    DropdownList2();
  }
}

使用DroDownList和js實現地區二級聯動，效果圖如下：

1.在aspx頁面中，拖入兩個DroDownList控件，代碼如下：

<div>
  <asp:DropDownList ID="s1" runat="server"></asp:DropDownList>
  <asp:DropDownList ID="s2" runat="server"></asp:DropDownList>
  <script language="javascript" type="text/javascript" src="er.js></script>
  <script language="javascript" type="text/javascript">setup()</script>
</div>

2.er.js代碼如下：

function Dsy() 
{ 
this.Items = {}; 
} 
Dsy.prototype.add = function(id,iArray) 
{ 
this.Items[id] = iArray; 
} 
Dsy.prototype.Exists = function(id) 
{ 
if(typeof(this.Items[id]) == "undefined") return false; 
return true; 
}

function change(v){ 
var str="0"; 
for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));}; 
var ss=document.getElementById(s[v]); 
with(ss){ 
length = 0; 
options[0]=new Option(opt0[v],opt0[v]); 
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v) 
{ 
if(dsy.Exists(str)){ 
ar = dsy.Items[str]; 
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]); 
if(v)options[1].selected = true; 
} 
} 
if(++v<s.length){change(v);} 
} 
}

var dsy = new Dsy();

dsy.add("0",["北京市","天津市","河北省","山西省","內蒙古自治區","遼寧省","吉林省","黑龍江省","上海市","江蘇省","浙江省","安徽省","福建省","江西省","山東省","河南省","湖北省","湖南省","廣東省","廣西自治區","海南省","重慶市","四川省","貴州省","雲南省","西藏自治區","陝西省","甘肅省","青海省","寧夏回族自治區","新疆維吾爾自治區","香港特別行政區","澳門特別行政區","台灣省","其它"]);

dsy.add("0_0",["北京","東城區","西城區","崇文區","宣武區","朝陽區","豐台區","石景山區"," 海澱區（中關村）","門頭溝區","房山區","通州區","順義區","昌平區","大興區","懷柔區","平谷區","密雲縣","延慶縣","其他"]); 
dsy.add("0_1",["和平區","河東區","河西區","河北區","南開區","紅橋區","塘沽區","漢沽區","大港區","西青區","津南區","武清區","薊縣","寧河縣","靜海縣","其他"]); 
dsy.add("0_2",["石家莊市","張家口市","承德市","秦皇島市","唐山市","廊坊市","衡水市","滄州市","邢台市","邯鄲市","保定市","其他"]); 
dsy.add("0_3",["太原市","朔州市","大同市","長治市","晉城市","忻州市","晉中市","臨汾市","呂梁市","運城市","其他"]); 
dsy.add("0_4",["呼和浩特市","包頭市","赤峰市","呼倫貝爾市","鄂爾多斯市","烏蘭察布市","巴彥淖爾市","興安盟","阿拉善盟","錫林郭勒盟","其他"]); 
dsy.add("0_5",["沈陽市","朝陽市","阜新市","鐵嶺市","撫順市","丹東市","本溪市","遼陽市","鞍山市","大連市","營口市","盤錦市","錦州市","葫蘆島市","其他"]); 
dsy.add("0_6",["長春市","白城市","吉林市","四平市","遼源市","通化市","白山市","延邊朝鮮族自治州","其他"]); 
dsy.add("0_7",["哈爾濱市","七台河市","黑河市","大慶市","齊齊哈爾市","伊春市","佳木斯市","雙鴨山市","雞西市","大興安嶺地區(加格達奇)","牡丹江","鶴崗市","綏化市　","其他"]); 
dsy.add("0_8",["黃浦區","盧灣區","徐匯區","長寧區","靜安區","普陀區","閘北區","虹口區","楊浦區","闵行區","寶山區","嘉定區","浦東新區","金山區","松江區","青浦區","南匯區","奉賢區","崇明縣","其他"]); 
dsy.add("0_9",["南京市","徐州市","連雲港市","宿遷市","淮安市","鹽城市","揚州市","泰州市","南通市","鎮江市","常州市","無錫市","蘇州市","其他"]);
dsy.add("0_10",["杭州市","湖州市","嘉興市","舟山市","寧波市","紹興市","衢州市","金華市","台州市","溫州市","麗水市","其他"]);
dsy.add("0_11",["合肥市","宿州市","淮北市","亳州市","阜陽市","蚌埠市","淮南市","滁州市","馬鞍山市","蕪湖市","銅陵市","安慶市","黃山市","六安市","巢湖市","池州市","宣城市","其他"]);
dsy.add("0_12",["福州市","南平市","莆田市","三明市","泉州市","廈門市","漳州市","龍巖市","寧德市","其他"]);
dsy.add("0_13",["南昌市","九江市","景德鎮市","鷹潭市","新余市","萍鄉市","贛州市","上饒市","撫州市","宜春市","吉安市","其他"]);
dsy.add("0_14",["濟南市","聊城市","德州市","東營市","淄博市","濰坊市","煙台市","威海市","青島市","日照市","臨沂市","棗莊市","濟寧市","泰安市","萊蕪市","濱州市","菏澤市","其他"]);
dsy.add("0_15",["鄭州市","三門峽市","洛陽市","焦作市","新鄉市","鶴壁市","安陽市","濮陽市","開封市","商丘市","許昌市","漯河市","平頂山市","南陽市","信陽市","周口市","駐馬店市","其他"]);
dsy.add("0_16",["武漢市","十堰市","襄樊市","荊門市","孝感市","黃岡市","鄂州市","黃石市","鹹寧市","荊州市","宜昌市","隨州市","恩施土家族苗族自治州","仙桃市","天門市","潛江市","神農架林區","其他"]);
dsy.add("0_17",["長沙市","張家界市","常德市","益陽市","岳陽市","株洲市","湘潭市","衡陽市","郴州市","永州市","邵陽市","懷化市","婁底市","湘西土家族苗族自治州","其他"]);
dsy.add("0_18",["廣州市","清遠市市","韶關市","河源市","梅州市","潮州市","汕頭市","揭陽市","汕尾市","惠州市","東莞市","深圳市","珠海市","中山市","江門市","佛山市","肇慶市","雲浮市","陽江市","茂名市","湛江市","其他"]);
dsy.add("0_19",["南寧市","桂林市","柳州市","梧州市","貴港市","玉林市","欽州市","北海市","防城港市","崇左市","百色市","河池市","來賓市","賀州市","其他"]);
dsy.add("0_20",["海口市","三亞市","其他"]);
dsy.add("0_21",["渝中區","大渡口區","江北區","沙坪壩區","九龍坡區","南岸區","北碚區","萬盛區","雙橋區","渝北區","巴南區","萬州區","涪陵區","黔江區","長壽區","合川市","永川市","江津市","南川市","綦江縣","潼南縣","銅梁縣","大足縣","璧山縣","墊江縣","武隆縣","豐都縣","城口縣","開縣","巫溪縣","巫山縣","奉節縣","雲陽縣","忠縣","石柱土家族自治縣","彭水苗族土家族自治縣","酉陽土家族苗族自治縣","秀山土家族苗族自治縣","其他"]);
dsy.add("0_22",["成都市","廣元市","綿陽市","德陽市","南充市","廣安市","遂寧市","內江市","樂山市","自貢市","泸州市","宜賓市","攀枝花市","巴中市","資陽市","眉山市","雅安","阿壩藏族羌族自治州","甘孜藏族自治州","涼山彝族自治州縣","其他"]);
dsy.add("0_23",["貴陽市","六盤水市","遵義市","安順市","畢節地區","銅仁地區","黔東南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","其他"]);
dsy.add("0_24",["昆明市","曲靖市","玉溪市","保山市","昭通市","麗江市","普洱市","臨滄市","寧德市","德宏傣族景頗族自治州","怒江傈僳族自治州","楚雄彝族自治州","紅河哈尼族彝族自治州","文山壯族苗族自治州","大理白族自治州","迪慶藏族自治州","西雙版納傣族自治州","其他"]);
dsy.add("0_25",["拉薩市","那曲地區","昌都地區","林芝地區","山南地區","日喀則地區","阿裡地區","其他"]);
dsy.add("0_26",["西安市","延安市","銅川市","渭南市","鹹陽市","寶雞市","漢中市","安康市","商洛市","其他"]);
dsy.add("0_27",["蘭州市 ","嘉峪關市","金昌市","白銀市","天水市","武威市","酒泉市","張掖市","慶陽市","平涼市","定西市","隴南市","臨夏回族自治州","甘南藏族自治州","其他"]);
dsy.add("0_28",["西寧市","海東地區","海北藏族自治州","黃南藏族自治州","玉樹藏族自治州","海南藏族自治州","果洛藏族自治州","海西蒙古族藏族自治州","其他"]);
dsy.add("0_29",["銀川市","石嘴山市","吳忠市","固原市","中衛市","其他"]);
dsy.add("0_30",["烏魯木齊市","克拉瑪依市","喀什地區","阿克蘇地區","和田地區","吐魯番地區","哈密地區","塔城地區","阿勒泰地區","克孜勒蘇柯爾克孜自治州","博爾塔拉蒙古自治州","昌吉回族自治州 伊犁哈薩克自治州","巴音郭楞蒙古自治州","河子市","阿拉爾市","五家渠市","圖木舒克市","其他"]);
dsy.add("0_31",["香港","其他"]);
dsy.add("0_31",["澳門","其他"])
dsy.add("0_32",["台灣","其他"])

var s=["s1","s2"]; 
var opt0 = ["請選擇","請選擇"]; 
function setup() 
{ 
for(i=0;i<s.length-1;i++) 
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); 
change(0); 
}

以上就是本文的全部內容，希望對大家學習APS.NET程序設計有所幫助。