dropdownlist ajax联动,ASP .NET DropDownList多级联动事件

思路

假如有三级省、市、区，先加载出所有省

选择省之后，加载出该省所有市

选择市之后，加载出该市所有区

重新选择省，则清空市和区

重新选择市，则清空区

想好数据结构，不同的数据结构做法不同

例子

数据结构

public class Area

{

public int PKID { get; set; }

public int ParentID { get; set; }

public string Name { get; set; }

}

测试数据

1

前台

地区搜索：@Html.DropDownList("Provinces", new SelectList(ViewBag.Province as System.Collections.IEnumerable, "PKID", "Name"), "请选择")

请选择

请选择

获取当前选择

$("#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("请选择");

} else {

$("#Citys").html("请选择");

$("#Districts").html("请选择");

}

});

$("#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("请选择");

}

});

function GetRegion(ParentID) {

var option = "请选择";

$.ajax({

type: "get",

url: "/AboutDB/GetArea",

data: { "ParentID": ParentID },

async: false,

success: function (city) {

//拼接下拉框

$.each(city, function (index, item) {

option += "" + item.Name + "";

});

}

});

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

}

后台

//加载页面，先查出省列表

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 GetArea(int ParentID)

{

string sql =string.Format("select PKID,ParentID,Name from area where ParentID={0}",ParentID);

return DAL.DbManager.Instance.QueryBySQL(sql).ToList();

}