萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery+ajax實現無刷新級聯菜單示例
jQuery+ajax實現無刷新級聯菜單示例
這篇文章主要介紹了jQuery+ajax實現無刷新級聯菜單示例，代碼很完整，也非常實用，有需要的小伙伴可以參考下。
前台用AJAX直接調用後台方法，老有人發帖提問，沒事做個示例
下面是做的一個前台用JQUERY，AJAX調用後台方法做的無刷新級聯菜單
CasMenu.aspx頁面：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Porschev--前台JS(Jquery)調用後台方法 級聯菜單</title> <script src="js/jquery-1.3.2-vsdoc.js" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce:script> <script type="text/javascript"> $(function() { $("#selPro").change(function() { //省份下拉菜單的change事件 var params = '{str:"' + $(this).val() + '"}'; //此處參數名要注意和後台方法參數名要一致 $.ajax({ type: "POST", //提交方式 url: "CasMenu.aspx/ShowCity", //提交的頁面/方法名 data: params, //參數（如果沒有參數：null） dataType: "text", //類型 contentType: "application/json; charset=utf-8", beforeSend: function(XMLHttpRequest) { $('#tipsDiv').text("正在查詢..."); }, success: function(msg) { $('#tipsDiv').text("查詢成功!"); $("#selCity option").each(function() { $(this).remove(); //移除原有項 }); $("<option value='0'>===請選擇===</option>").appendTo("#selCity"); //添加一個默認項 $(eval("(" + msg + ")").d).appendTo("#selCity"); //將返回來的項添加到下拉菜單中 }, error: function(xhr, msg, e) { alert("error"); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> Porschev--前台JS(Jquery)調用後台方法 級聯菜單<br /> <br /> <select id="selPro" name="selPro"> <%=strPro %> </select>省(直轄市) <select id="selCity" name="selCity"> <option value="0">===請選擇===</option> </select>（市） </div> <div id="tipsDiv"> </div> </form> </body> </html>CasMenu.aspx.cs
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using CasMenuModels; using CasMenuBLL; using System.Text; public partial class _Default : System.Web.UI.Page { public static string strPro = string.Empty; //省份下拉項 public static string strCity = string.Empty; //城市下拉項 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { } ShowPro(); } #region##省份下拉列表框 /// <summary> /// 省份下拉列表框 /// </summary> /// <returns></returns> public string ShowPro() { StringBuilder str = new StringBuilder(); //得到所有省份集合 List<CasMenuModels.Province> list = new CasMenuBLL.ProvinceManager().GetAllProvince(); //添加一個初始項 str.Append("<option value=""); str.Append("0"); str.Append("">"); str.Append("===請選擇==="); str.Append("</option>"); //循環追加省份下拉項 foreach (CasMenuModels.Province p in list) { str.Append("<option value=""); str.Append(p.ProvinceId); str.Append("">"); str.Append(p.ProvinceName); str.Append("</option>"); } return strPro = str.ToString(); } #endregion #region##城市下拉列表框 /// <summary> /// 城市下拉列表框 /// </summary> /// <param name="str">省份ID</param> /// <returns></returns> [System.Web.Services.WebMethod()] public static string ShowCity(string str) //方法是靜態的 { StringBuilder strCi = new StringBuilder(); if (str == "0") //為初始項 {javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved