jQuery+ajax實現無刷新級聯菜單示例

2024-09-01 08:33:31

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery+ajax實現無刷新級聯菜單示例，代碼很完整，也非常實用，有需要的小伙伴可以參考下。

前臺用AJAX直接調用后臺方法，老有人發帖提問，沒事做個示例

下面是做的一個前臺用JQUERY，AJAX調用后臺方法做的無刷新級聯菜單

CasMenu.aspx頁面：

<%@ 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

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") //為初始項

{

strCi.Append("<option value=/"");

strCi.Append("請選擇");

strCi.Append("/">");

strCi.Append("請選擇");

strCi.Append("</option>");

}

else

{

List<CasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str)); //根據省份ID得到城市集合

foreach (City c in list)

{

strCi.Append("<option value=/"");

strCi.Append(c.CityId);

strCi.Append("/">");

strCi.Append(c.CityName);

strCi.Append("</option>");

}

}

return strCity = strCi.ToString();

}

#endregion

}