zoukankan      html  css  js  c++  java
  • ASP .NET DropDownList多级联动事件

    思路

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

    例子

    数据结构

    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();
    }
  • 相关阅读:
    JSP和Servlet的相同点和不同点、有何联系。
    Java泛型
    HttpURLConnection与HttpClient比较和使用示例
    Mybatis中的#和$的区别
    MySQL_第三方数据库引擎_tokudb
    mysql的并发处理机制_上篇
    SQL SERVER 自动生成 MySQL 表结构及索引 的建表SQL
    SQL SERVER大话存储结构(6)_数据库数据文件
    SQL SERVER大话存储结构(4)_复合索引与包含索引
    基于binlog来分析mysql的行记录修改情况(python脚本分析)
  • 原文地址:https://www.cnblogs.com/Lulus/p/7873285.html
Copyright © 2011-2022 走看看