ASP .NET DropDownList多级联动事件

来源：互联网发布：江西在线网安全知让编辑：程序博客网时间：2024/05/21 05:42

思路

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

例子

数据结构

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

测试数据

前台

<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