jQuery JSON實作無刷新三級連動實例探討_jquery

複製程式碼如下程式碼：

js:

複製程式碼

複製程式碼

程式碼如下：


< ;script src="js/jquery-1.4.2.min.js" type="text/javascript" >

$(文檔).ready(function () {
GetA();
$("#ddl1").change(function () { GetB (); });
$( "#ddl2").change(function () { GetC(); });
});
函數GetA()
{
$("#ddl1").html("");
$("#ddl1").append("請選擇...");
//$("select[name$=ddl1] > option:selected").remove();
var strId = 0;
$.getJSON("LoadClass.ashx? ddlId=" strId, function (data) {
for (var i = 0; i $("select[ name$=ddl1]").append($(" ").val(data[i].ID).html(data[i].Cname));
} ;
GetB();
});
}
函數GetB()
{
$("#ddl2").html(""); $("#ddl3").html("");
var strId = $("#ddl1").attr("value");
if (strId != 0) {
$.getJSON("LoadClass.ashx?ddlId=" strId, function (data) {
for (var i = 0; i $("select[name$=ddl2]").append($(""). val(data[i].ID).html(data[ i].Cname));
};
GetC();
}
}
函數GetC()
{
$("#ddl3").html("");
var strId = $("#ddl2").attr("value");
if (strId != 0) {
$.getJSON("LoadClass.ashx?ddlId=" strId, function (data) {
for (var i = 0; i $("select [name$=ddl3]").append($("").val(data[i].ID).html(data[我].Cname));
}) ;
}
}

腳本>

LoadClass.ashx: 複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製碼🎜>
代碼如下：



使用系統；
使用System.Web；
使用System.Text;
使用System.Data;
public class LoadClass : IHttpHandler {
public void ProcessRequest (HttpContext context) {
// 記憶體[{"ID":"275"," Cname":"A1"},{"ID": "319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
int strId = Convert.ToInt32(context.Request["ddlId"]) ;
string strSQL = "select * from Class where Parent_Ptr=" strId " order by classOrder asc ";
db d = new db();
DataTable dt = d.getDT(strSQL);
StringBuilder strClass = new StringBuilder();
if (dt != null)
{
strClass.Append("[");
for (int i = 0; i {
strClass.Append("{");
strClass.Append(""ID":"" dt. Rows[i]["id"].ToString() "",");

strClass.Append(""Cname":"" dt.Rows[i]["classCname"].ToString() "" "); if (i != dt.Rows.Count - 1) { strClass.Append("},"); } } }

} } } } } } } } } } } } } } } } } >strClass.Append("}"); strClass.Append("]"); context.Response.ContentType = "application/json"; context.Response.ContentEncoding = Encoding.UTF8; context.Response.Write(strClass.ToString()); context.Response.End(); } public bool IsReusable { get { 回傳false; 🎜>} } } 注意： 複製代碼代碼如下：

//後台只能取得value值，無法直接取得text，需要透過js、控制項中轉
//結果：275 276 277
Label1.Text = Request.Form[ddl1.UniqueID ] " " Request.Form["ddl2"] " " Request.Form[ddl3.ClientID.Replace("_", "$")] ;遇到的問題：下拉框text的值透過HiddenField控制項轉


var Key1 = $("#ddl1>option:selected").val();
$('#HiddenField1').val(Key1);
var Key2 = $("#ddl2>option:selected").val();
$('#HiddenField2').val(Key2) ;
var Key3 = $("#ddl3>option:selected").val();
$('#HiddenField3').val(Key3);

選擇下拉框後動態賦值到HiddenField 控制項中的值無法與下拉框選取的值相對應！
可能與初始化有關，賦值這段程式碼該放到什麼地方呢？或是有什麼好的方法，歡迎討論？