jQuery JSON實(shí)現(xiàn)無刷新三級(jí)聯(lián)動(dòng)實(shí)例探討
更新時(shí)間:2013年05月28日 18:01:26 作者:
無刷新三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法有很多,今天將與大家討論下jQuery JSON如何實(shí)現(xiàn),感興趣的朋友們可以參考下哈
復(fù)制代碼 代碼如下:
<asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList>
<asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList>
<asp:DropDownList ID="ddl3" runat="server" Width="100px" ></asp:DropDownList>
js:
復(fù)制代碼 代碼如下:
<script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function () {
GetA();
$("#ddl1").change(function () { GetB(); });
$("#ddl2").change(function () { GetC(); });
});
function GetA()
{
$("#ddl1").html("");
$("#ddl1").append("<option value='-1' selected='selected'>請(qǐng)選擇...</option>");
//$("select[name$=ddl1] > option:selected").remove();
var strId = 0;
$.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
for (var i = 0; i < data.length; i++) {
$("select[name$=ddl1]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
};
GetB();
});
}
function 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 < data.length; i++) {
$("select[name$=ddl2]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
};
GetC();
});
}
}
function GetC()
{
$("#ddl3").html("");
var strId = $("#ddl2").attr("value");
if (strId != 0) {
$.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
for (var i = 0; i < data.length; i++) {
$("select[name$=ddl3]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
};
});
}
}
</script>
LoadClass.ashx:
復(fù)制代碼 代碼如下:
<%@ WebHandler Language="C#" Class="LoadClass" %>
using System;
using System.Web;
using System.Text;
using System.Data;
public class LoadClass : IHttpHandler {
public void ProcessRequest (HttpContext context) {
// 數(shù)組 [{"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 < dt.Rows.Count; 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 {
return false;
}
}
}
注意:
復(fù)制代碼 代碼如下:
//后臺(tái)只能獲取value值,不能直接獲取text,需要通過js、控件中轉(zhuǎn)
//結(jié)果:275 276 277
Label1.Text = Request.Form[ddl1.UniqueID] + " " + Request.Form["ddl2"] + " " + Request.Form[ddl3.ClientID.Replace("_", "$")] ;遇到的問題:下拉框text的值通過HiddenField控件中轉(zhuǎn) <asp:HiddenField ID="HiddenField1" runat="server" />
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:HiddenField ID="HiddenField3" runat="server" />
把選中下拉框的值賦予隱藏控件中: <script type="text/javascript">
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);
</script>
選擇下拉框后 動(dòng)態(tài)賦值到HiddenField 控件中的值 無法與下拉框選中的值相對(duì)應(yīng)!
可能與初始化有關(guān),賦值這段代碼應(yīng)該放到什么地方呢?或者有什么好的方法,歡迎討論?
您可能感興趣的文章:
- Java框架SSH結(jié)合Easyui控件實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)示例解析
- 基于jQuery+JSON的省市二三級(jí)聯(lián)動(dòng)效果
- jquery實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)
- jQuery select表單提交省市區(qū)城市三級(jí)聯(lián)動(dòng)核心代碼
- 簡單實(shí)用jquery版三級(jí)聯(lián)動(dòng)select示例
- ajax.net +jquery 無刷新三級(jí)聯(lián)動(dòng)的實(shí)例代碼
- 使用jQuery+HttpHandler+xml模擬一個(gè)三級(jí)聯(lián)動(dòng)的例子
- asp.net省市三級(jí)聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- jquery+json 通用三級(jí)聯(lián)動(dòng)下拉列表
- SSH結(jié)合jquery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果
相關(guān)文章
jQuery獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法
獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法有很多,本教程為大家介紹下使用jquery獲取的具體實(shí)現(xiàn)2014-02-02解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題
這篇文章主要介紹了如何解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)右下角可縮放大小的層完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)右下角可縮放大小的層,以完整實(shí)例形式分析了jQuery頁面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下2016-06-06jQuery簡單實(shí)現(xiàn)點(diǎn)擊文本框復(fù)制內(nèi)容到剪貼板上的方法
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)點(diǎn)擊文本框復(fù)制內(nèi)容到剪貼板上的方法,涉及jQuery針對(duì)瀏覽器的判定與剪貼板的讀寫操作技巧,需要的朋友可以參考下2016-08-08jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07