ASP.NET ajax实现无限级下拉菜单联动
求大神给个讲讲,最好有个DEMO,数据是从数据库获取的, 被这位写烂了 各种实现方式
http://weblogs.asp.net/raduenuca/archive/2011/05/08/asp-net-mvc-cascading-dropdown-lists-tutorial-part-6-creating-a-jquery-cascade-plugin.aspx
演示:http://demos.raduenuca.ro/MVC3Extensions/CascadingDropDownLists/Home
[解决办法]
我是新手,最近做了类似你说的,不知道符不符合你的要求,代码如下:
这是aspx页面代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Study1.aspx.cs" Inherits="Weibin_Pages_study_Study1" %>
<!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></title>
<script src="../../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../../Scripts/Weibin/AjaxStudy1.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
所在州:
</td>
<td>
<select id="slContinent" onchange="GetCountry()">
<option value="" selected="selected">请选择</option>
<option value="亚洲">亚洲</option>
<option value="北美">北美</option>
</select>
</td>
</tr>
<tr>
<td>
国家:
</td>
<td>
<select id="slCountry" onchange="GetCity()">
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
<tr>
<td>
城市:
</td>
<td>
<select id="slCity" onchange="GetZone()">
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
<tr>
<td>
地区:
</td>
<td>
<select id="slZone">
<option value="" selected="selected">请选择</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
function GetCountry() {
var con = escape($("#slContinent").val());
var webUrl = "../../Ajax/Ajax_Study1.aspx?Action=getcountry&con=" + con;
$.ajax({
url: webUrl,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("出错了,请联系管理员!");
},
success: function (data) {
var sel = data.split("<!DOCTYPE");
document.getElementById("slCountry").length = 1;
$("#slCountry").append(sel[0]);
document.getElementById("slCity").length = 1;
document.getElementById("slZone").length = 1;
}
});
}
function GetCity() {
var cou = escape($("#slCountry").val());
var webUrl = "../../Ajax/Ajax_Study1.aspx?Action=getcity&cou=" + cou;
$.ajax({
url: webUrl,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("出错了,请联系管理员!");
},
success: function (data) {
var sel = data.split("<!DOCTYPE");
document.getElementById("slCity").length = 1;
$("#slCity").append(sel[0]);
document.getElementById("slZone").length = 1;
}
});
}
function GetZone() {
var city = escape($("#slCity").val());
var webUrl = "../../Ajax/Ajax_Study1.aspx?Action=getZone&City=" + city;
$.ajax({
url: webUrl,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("出错了,请联系管理员!");
},
success: function (data) {
var sel = data.split("<!DOCTYPE");
document.getElementById("slZone").length = 1;
$("#slZone").append(sel[0]);
}
});
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WeibinPrograms.DAL;
using NHibernate.Criterion;
using Castle.ActiveRecord;
public partial class Weibin_Ajax_Ajax_Study1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string action = Request.QueryString["Action"].ToString();
switch (action)
{
case "getcountry":
string con = Request.QueryString["con"].ToString();
Country[] cou1 = Country.FindAll(Expression.Eq("Continent", con));
string html1 = "";
for (int i = 0; i < cou1.Length; i++)
{
if (i == 0)
{
html1 += "<option value=" + cou1[i].Countrys + ">" + cou1[i].Countrys + "</option>";
continue;
}
int k = 0;
for (int j = 0; j <i; j++)
{
if (cou1[j].Countrys == cou1[i].Countrys)
{
k++;
}
}
if (k == 0)
{
html1 += "<option value=" + cou1[i].Countrys + ">" + cou1[i].Countrys + "</option>";
}
}
Response.Clear();
Response.Write(html1);
break;
case "getcity":
string cou = Request.QueryString["cou"].ToString();
Country[] cou2 = Country.FindAll(Expression.Eq("Countrys", cou));
string html2 = "";
for (int i = 0; i < cou2.Length; i++)
{
if (i == 0)
{
html2 += "<option value=" + cou2[i].City + ">" + cou2[i].City + "</option>";
continue;
}
int k = 0;
for (int j = 0; j <i; j++)
{
if (cou2[j].City == cou2[i].City)
{
k++;
}
}
if (k == 0)
{
html2 += "<option value=" + cou2[i].City + ">" + cou2[i].City + "</option>";
}
}
Response.Clear();
Response.Write(html2);
break;
case "getZone":
string city = Request.QueryString["City"].ToString();
Country[] cou3 = Country.FindAll(Expression.Eq("City", city));
string html3 = "";
for (int i = 0; i < cou3.Length; i++)
{
if (i == 0)
{
html3 += "<option value=" + cou3[i].Zone + ">" + cou3[i].Zone + "</option>";
continue;
}
int k = 0;
for (int j = 0; j <i; j++)
{
if (cou3[j].Zone == cou3[i].Zone)
{
k++;
}
}
if (k == 0)
{
html3 += "<option value=" + cou3[i].Zone + ">" + cou3[i].Zone + "</option>";
}
}
Response.Clear();
Response.Write(html3);
break;
}
}
}