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"), "请选择")
<select id="Citys">
<option value="">请选择</option>
</select>
<select id="Districts">
<option value="">请选择</option>
</select>
<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多级联动事件的更多相关文章
- DropDownList的多级联动
DropDownList的多级联动的问题最典型的案例就是实现省市级三级联动的案例,对这个问题的描述是当选中山东省之后,在选择市的下拉菜单时,市一栏只出现山东省下面的市.对于县也是同样的道理. 我也做的 ...
- 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 ...
- vue在多级联动时,一些情况不用watch而用onchange会更好
onchange事件在内容改变且失去焦点时触发,因此在一些多级联动需要清空次级内容的时候,用onchange就非常有用了,尤其是浏览器会提前加载数据的情况下.有篇文章可以看一下,链接. PS:路漫漫其 ...
- Asp.net DropDownList 自定义样式(想怎么改就怎么改!)
最近在做一个asp.net的项目,需要对默认的dropdownlist样式进行美化,固有的dropdownlist的小箭头实在让人无法接受,于是开始在百度,google 上下求索,天不负有心人,终于找 ...
- 为什么DropDownList的SelectedIndexChanged事件触发不了
写的还行,转来大家看看 为什么DropDownList的SelectedIndexChanged事件触发不了? 为什么设置了DropDownList的AutoPostBack="True&q ...
- asp.net学习之GridView事件、GridViewRow对象
原文:asp.net学习之GridView事件.GridViewRow对象 1. GridView控件的事件 GridView有很多事件,事件可以定制控件的外观或者行为.事件分为三类 1.1 ...
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- MVC实现多级联动
前言 多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HT ...
- js 多级联动(省、市、区)
js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...
随机推荐
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
- 【C++竞赛 F】yyy的三角形
时间限制:2s 内存限制:32MB 问题描述 yyy对三角形非常感兴趣,他有n个木棍,他正在用这些木棍组成三角形.这时xxx拿了两根木棍过来,xxx希望yyy能给他一根木棍,使得xxx可以组成一个三角 ...
- jquery file upload示例
原文链接:http://blog.csdn.net/qq_37936542/article/details/79258158 jquery file upload是一款实用的上传文件插件,项目中刚好用 ...
- [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 ...
- 【a501】算24点
Time Limit: 1 second Memory Limit: 32 MB [问题描述] 几十年前全世界就浒一种数字游戏,至今仍有人乐此不疲.在中国我们把这种游戏称为"算24点&quo ...
- 小强的HTML5移动开发之路(25)—— AppCan开发环境
一.工具下载: 官方下载地址:http://www.appcan.cn/experience.html 按照安装指导默认安装即可 二.建立项目 启动AppCan SDK 建立项目 填入在appcan官 ...
- angularjs1.6 制作流程图,启动流程,流程设置
话不多说,我们先来看一下效果图: 点击添加按扭要增加一个,可以叠加 代码如下: server.server().addprojectrooml({ type: , processName: $scop ...
- python request爬取百度贴吧
import requests import os import shutil import time class PostBarSpider(object): def __init__(self, ...
- vector, list, deque的选用(vector适用少量对象,list适用大量对象),以及效率问题
如何选择这三个容器中哪一个,应根据你的需要而定,一般应遵循下面的原则: 1.如果你需要高效的随机存取,而不在乎插入和删除的效率,使用vector 2.如果你需要大量的插入和删除,而不关心随机存取( ...
- 【14.36%】【codeforces 614C】Peter and Snow Blower
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...