asp.net+JSON+AJAX(基於prototype1.4)做無重新整理的2級DropDownList

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

JSON的資料格式:{"xx":"xx1","yy":[{"yy1":"yyy1"},{"yy2":"yyy2"}]}

後台部分:(合成JSON資料格式)

//這是擷取根目錄
public string getRootTree()
{

using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from MMenu where MParentID=0"))
{
sb.Append("{""region"":[");
while(dr.Read())
{
sb.Append("{""");
sb.Append("MID");
sb.Append(""":""");
sb.Append(dr["MID"].ToString());
sb.Append(""",""");
sb.Append("MName");
sb.Append(""":""");
sb.Append(dr["MName"].ToString());
sb.Append(""",""");
sb.Append("MParentID");
sb.Append(""":""");
sb.Append(dr["MParentID"].ToString());
sb.Append("""},");
}
sb.Append("]");
return sb.ToString().Substring(0,sb.ToString().Length-2)+"]}";
}
}

//根據ID擷取下級的資料

public string getSubTree(int MID)
{
using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from MMenu where MParentID="+MID))
{
sb.Append("{""region"":[");
while(dr.Read())
{
sb.Append("{""");
sb.Append("MID");
sb.Append(""":""");
sb.Append(dr["MID"].ToString());
sb.Append(""",""");
sb.Append("MName");
sb.Append(""":""");
sb.Append(dr["MName"].ToString());
sb.Append(""",""");
sb.Append("MParentID");
sb.Append(""":""");
sb.Append(dr["MParentID"].ToString());
sb.Append("""},");
}
sb.Append("]");
return sb.ToString().Substring(0,sb.ToString().Length-2)+"]}";
}
}

前台部分:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
<head>
<title>select</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<script src=js/prototype-1.4.0.js></script>
<script>
function getJSON()
{
var myoptions={
parameters:"",
method:"get",
onSuccess:function(res){
var myData=eval("("+res.responseText+")");
myData.region.each(function(xx){
$("root").options.add(new Option(xx.MName,xx.MID));
}
);

}
}
new Ajax.Request("jsonSelect.aspx?action=root&s"+Math.random(),myoptions);
}

function getSub(id)
{
var myoptions={
parameters:"subID="+id,
method:"get",
onSuccess:function(res){
var myData=eval("("+res.responseText+")");
$("sub").options.length=1;
myData.region.each(function(xx){

$("sub").options.add(new Option(xx.MName,xx.MID));
}
);
}
}
new Ajax.Request("jsonSelect.aspx?action=sub&s"+Math.random(),myoptions);
}
</script>
</head>
<body onload=getJSON()>

<form id="Form1" method="post" runat="server">
<select name="a" id="root" onChange="getSub(this.value)">
<option value="" selected>-----請選擇類別-----</option>

</select>
<select name="a" id="sub" onChange="getSub(this.value)">
<option value="" selected>-----請選擇類別-----</option>

</select>
</form>

</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More