首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

ASP.NET ajax实现无限级下拉菜单联动解决方法

2013-09-28 
ASP.NET ajax实现无限级下拉菜单联动求大神给个讲讲,最好有个DEMO,数据是从数据库获取的,被这位写烂了 各

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>



这是js代码
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;
        }
    }
}



用了一张表,如下:
ASP.NET ajax实现无限级下拉菜单联动解决方法
ASP.NET ajax实现无限级下拉菜单联动解决方法

仅供参考,自己写的。新手难啊,我也在学习中。
[解决办法]
http://download.csdn.net/detail/qq137051908/3564288
很久以前的一个,可以用
[解决办法]
http://blog.csdn.net/xianfajushi/article/details/5928136
[解决办法]
http://download.csdn.net/download/c02645/3941481
这个是无刷新,无限级联动,做成控件

热点排行