首頁 > web前端 > js教程 > jQuery JSON實作無刷新三級連動實例探討_jquery

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

WBOY
發布: 2016-05-16 17:32:57
原創
1114 人瀏覽過
複製程式碼如下程式碼:





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 控制項中的值無法與下拉框選取的值相對應!
可能與初始化有關,賦值這段程式碼該放到什麼地方呢?或是有什麼好的方法,歡迎討論?
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板