思路

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

例子

数据结构

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

ASP .NET DropDownList多级联动事件的更多相关文章

  1. DropDownList的多级联动

    DropDownList的多级联动的问题最典型的案例就是实现省市级三级联动的案例,对这个问题的描述是当选中山东省之后,在选择市的下拉菜单时,市一栏只出现山东省下面的市.对于县也是同样的道理. 我也做的 ...

  2. asp.net MVC 下拉多级联动及编辑

    多级联动实现,附源码.当前,部分代码是参与博客园其它网友. 新增,前台代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...

  3. vue在多级联动时,一些情况不用watch而用onchange会更好

    onchange事件在内容改变且失去焦点时触发,因此在一些多级联动需要清空次级内容的时候,用onchange就非常有用了,尤其是浏览器会提前加载数据的情况下.有篇文章可以看一下,链接. PS:路漫漫其 ...

  4. Asp.net DropDownList 自定义样式(想怎么改就怎么改!)

    最近在做一个asp.net的项目,需要对默认的dropdownlist样式进行美化,固有的dropdownlist的小箭头实在让人无法接受,于是开始在百度,google 上下求索,天不负有心人,终于找 ...

  5. 为什么DropDownList的SelectedIndexChanged事件触发不了

    写的还行,转来大家看看 为什么DropDownList的SelectedIndexChanged事件触发不了? 为什么设置了DropDownList的AutoPostBack="True&q ...

  6. asp.net学习之GridView事件、GridViewRow对象

    原文:asp.net学习之GridView事件.GridViewRow对象 1. GridView控件的事件 GridView有很多事件,事件可以定制控件的外观或者行为.事件分为三类     1.1 ...

  7. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  8. MVC实现多级联动

    前言 多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HT ...

  9. js 多级联动(省、市、区)

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

随机推荐

  1. 实现拖拽上传文件的一款小控件——dropzone

    由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...

  2. win7

    http://www.xitongiso.com/?pot http://www.potplayer.org/

  3. GLPI-开源资产管理软件

    https://github.com/glpi-project/glpi/releases/tag/9.2.3 http://glpi-project.org/downloads/ 开源资产管理软件- ...

  4. Docker入门之 - 如何安装Docker CE

    原文:Docker入门之 - 如何安装Docker CE 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012055638/article/det ...

  5. MySQL 监控-innotop

    innotop 编写者Balon Schwartz,<高性能MySQL>的作者之一. innotop的作用为实时地展示服务器正在发生的事情,监控innodb,监控多个MySQL实例,是一款 ...

  6. C#中的“静态”

    静态构造函数: C#的一个新特征是也能够给类编写无參数的静态构造函数. 编写静态构造函数的一个原因是,类有一些静态字段或属性,须要在第一次使用类之前.从外部源中初始化这些静态的字段和属性. .NET运 ...

  7. 《写给大忙人看的Java SE 8》——Java8新特性总结

    阅读目录 接口中的默认方法和静态方法 函数式接口和Lambda表达式 Stream API 新的日期和时间 API 杂项改进 参考资料 回到顶部 接口中的默认方法和静态方法 先考虑一个问题,如何向Ja ...

  8. php正则及常用正则函数怎么用

    php正则及常用正则函数怎么用 一.总结 一句话总结: 能够使用正则的函数:preg_match();preg_match_all();preg_replace();preg_grep();preg_ ...

  9. javaScript实现简单网页倒计时代码

    <div id="button"> <input type="button" value="同意" id="b0 ...

  10. 【BZOJ 1018】 [SHOI2008]堵塞的交通traffic

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1018 [题意] [题解] 按照这里的题解写的http://blog.csdn.net/ ...