关闭

ASP .NET DropDownList多级联动事件

337人阅读 评论(0) 收藏 举报
分类:

思路

假如有三级省、市、区,先加载出所有省
选择省之后,加载出该省所有市
选择市之后,加载出该市所有区
重新选择省,则清空市和区
重新选择市,则清空区
想好数据结构,不同的数据结构做法不同

例子

数据结构

public class Area
{
    public int PKID { get; set; }
    public int ParentID { get; set; }
    public string Name { get; set; }
}

测试数据

1

前台

<div>
    <span>地区搜索:</span>@Html.DropDownList("Provinces", new SelectList(ViewBag.Province as System.Collections.IEnumerable, "PKID", "Name"), "请选择")
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select id="Citys">
        <option value="">请选择</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <select id="Districts">
        <option value="">请选择</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="GetResult()">获取当前选择</button>
</div>
<script>
    $("#Provinces").change(function () {
        var self = $(this);
        var parentId = self.val();
        if (parentId != "") {
            $("#Province").val(self.find("option:selected").val());
            var option = GetRegion(parentId);
            $("#Citys").html(option);
            $("#Districts").html("<option value=''>请选择</option>");
        } else {
            $("#Citys").html("<option value=''>请选择</option>");
            $("#Districts").html("<option value=''>请选择</option>");
        }
    });
    $("#Citys").change(function () {
        var self = $(this);
        var parentId = self.val();
        if (parentId != "") {
            $("#City").val(self.find("option:selected").val());
            $("#RegionID").val(parentId);
            var option = GetRegion(parentId);
            $("#Districts").html(option);
        } else {
            $("#Districts").html("<option value=''>请选择</option>");
        }
    });
    function GetRegion(ParentID) {
        var option = "<option value=''>请选择</option>";
        $.ajax({
            type: "get",
            url: "/AboutDB/GetArea",
            data: { "ParentID": ParentID },
            async: false,
            success: function (city) {
                //拼接下拉框
                $.each(city, function (index, item) {
                    option += "<option value=" + item.PKID + ">" + item.Name + "</option>";
                });
            }
        });
        //返回下拉框html
        return option;
    }
    function GetResult()
    {
        var Province = $("#Provinces").find("option:selected").text();
        var City = $("#Citys").find("option:selected").text();
        var District = $("#Districts").find("option:selected").text();
        layer.alert(Province + "-" + City + "-" + District);
    }
</script>

后台

//加载页面,先查出省列表
public ActionResult Area()
{
    ViewBag.Province = new AboutDBManager().GetArea(0);
    return View();
}
//根据ParentID查询子集
public ActionResult GetArea(int ParentID)
{
    var regions = new AboutDBManager().GetArea(ParentID);
    return Json(regions, JsonRequestBehavior.AllowGet);
}
public List<Area> GetArea(int ParentID)
{
    string sql =string.Format("select PKID,ParentID,Name from area where ParentID={0}",ParentID);
    return DAL.DbManager<Area>.Instance.QueryBySQL(sql).ToList();
}
0
0
查看评论

ASP.NET——实现两个下拉框动态联动

这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。 用了动态联动之后,当面对庞大的数据或复杂的分类时,页面的加载速度也不会受到影响,也方便了用户查找。
  • u010066934
  • u010066934
  • 2014-08-11 16:10
  • 6479

asp.net js实现dropdownlist二级联动(动态)

ASPX端代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     无标题页...
  • lishimin1012
  • lishimin1012
  • 2014-06-26 21:06
  • 3213

ASP.NET实现无刷新DropDownList联动

Example function load(state){ var drp2 = document.getElementById("DropDownList2"); for (i = drp2.length; i >= 0; i--){ drp2.options....
  • jxufewbt
  • jxufewbt
  • 2005-12-07 09:40
  • 4040

asp.net中dropdownlist控件实例操作

.aspx代码如下: DropDownList 选定某一项后,自动列出该项的index,text,value <asp:DropDownList ID="...
  • yayun0516
  • yayun0516
  • 2014-11-27 21:37
  • 1572

关于 ASP.NET 中DropDownList 事件的用法

我刚刚开始学习ASP.NET,所以当然有点辛苦,懂的不是很多...今天写程序时碰到了控件 DrowDownList.--列表控件....当我改变控件的值时,怎么也不能改变另一个DropDownList控件的值,查了MSDN之后才知道--原来我的AutoPostBack属性没有设置成"tru...
  • wangzi041
  • wangzi041
  • 2007-11-17 13:04
  • 6078

dropdownlist三级联动效果

级联DropDownList无刷新function drop1(){while(document.all["DropDownList2"].options.length>1)document.all["DropDownList2"].options.re...
  • zzdzzd1029
  • zzdzzd1029
  • 2007-02-06 09:41
  • 1536

【.net基础】--DropDownList控件:两级联动

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等。以前只知道有这样的页面效果,但是对这些控件了解并不多。不怕不知道,就怕不知道。
  • successA
  • successA
  • 2015-05-11 16:45
  • 1693

如何用JS实现一个DropDownList的值改变时触发另一个DropDownList的显示与隐藏

function Change()  {    alert("123");    var ss=$get("").value;    alert(ss); }
  • wzjemb
  • wzjemb
  • 2012-07-15 19:51
  • 3543

.net mvc DropDownList 下拉框_无限级分类

1、数据库设计: id:int  name:string pid:int  //父级id(顶级菜单默认为0) 2、Controller: using System; using System.Collections.Generic; using System.Linq; usin...
  • yan309271291
  • yan309271291
  • 2014-12-27 16:26
  • 1811

怎样在DropDownList控件中响应OnSelectedIndexChanged事件

出错情况:1).aspx文件中:  runat="server" OnSelectedIndexChanged="SelectFirstSort_Change">2).cs文件中:  protected void SelectFirs...
  • liuliu20036
  • liuliu20036
  • 2009-03-31 22:19
  • 8920
    个人资料
    • 访问:12641次
    • 积分:380
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:6篇
    • 译文:3篇
    • 评论:1条
    文章分类
    最新评论