思路

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

例子

数据结构

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. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  2. 【C++竞赛 F】yyy的三角形

    时间限制:2s 内存限制:32MB 问题描述 yyy对三角形非常感兴趣,他有n个木棍,他正在用这些木棍组成三角形.这时xxx拿了两根木棍过来,xxx希望yyy能给他一根木棍,使得xxx可以组成一个三角 ...

  3. jquery file upload示例

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79258158 jquery file upload是一款实用的上传文件插件,项目中刚好用 ...

  4. [Ramda] Declaratively Map Data Transformations to Object Properties Using Ramda evolve

    We don't always control the data we need in our applications, and that means we often find ourselves ...

  5. 【a501】算24点

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 几十年前全世界就浒一种数字游戏,至今仍有人乐此不疲.在中国我们把这种游戏称为"算24点&quo ...

  6. 小强的HTML5移动开发之路(25)—— AppCan开发环境

    一.工具下载: 官方下载地址:http://www.appcan.cn/experience.html 按照安装指导默认安装即可 二.建立项目 启动AppCan SDK 建立项目 填入在appcan官 ...

  7. angularjs1.6 制作流程图,启动流程,流程设置

    话不多说,我们先来看一下效果图: 点击添加按扭要增加一个,可以叠加 代码如下: server.server().addprojectrooml({ type: , processName: $scop ...

  8. python request爬取百度贴吧

    import requests import os import shutil import time class PostBarSpider(object): def __init__(self, ...

  9. vector, list, deque的选用(vector适用少量对象,list适用大量对象),以及效率问题

    如何选择这三个容器中哪一个,应根据你的需要而定,一般应遵循下面的原则:  1.如果你需要高效的随机存取,而不在乎插入和删除的效率,使用vector  2.如果你需要大量的插入和删除,而不关心随机存取( ...

  10. 【14.36%】【codeforces 614C】Peter and Snow Blower

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...