ASP .NET DropDownList多级联动事件

本文主要是介绍ASP .NET DropDownList多级联动事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路

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

例子

数据结构

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>";});}});//返回下拉框htmlreturn 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();
}

这篇关于ASP .NET DropDownList多级联动事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！