思路

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

例子

数据结构

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();}

ASP .NET DropDownList多级联动事件

原文地址：http://www.cnblogs.com/Lulus/p/7873285.html