基于MVC3方式实现下拉列表联动(JQuery)


Posted in Javascript onSeptember 02, 2013

上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考。
要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化。如:选择中国,则另个一下拉框里显示中国各个省份。
传统的HTML方式比较简单,实际上基于MVC的实现方式也大同小异。

直接上代码:

public class DP_Provice 
{ 
public int proviceID { get; set; } 
public string ProviceName { get; set; } 
public int ProviceNode { get; set; } 
public virtual List<DP_City> citySource { get; set; } 
} public class DP_City 
{ 
public int CityNode { get; set; } 
public string CityName { get; set; } 
public string ProviceNode { get; set; } 
}

对以上涉及到的实体类予以赋值,暂时使用一个静态类初始化简单数据:
public static class DPDataSource 
{ 
public static List<DP_Provice> InitalData() 
{ 
List<DP_Provice> source = new List<DP_Provice> 
{ 
new DP_Provice{ ProviceNode=1, ProviceName="北京", citySource=new List<DP_City>{ 
new DP_City{ 
CityNode=11, CityName="北京海淀" 
}, 
new DP_City{ 
CityNode=12,CityName="北京西城" 
} 
}}, 
new DP_Provice{ ProviceNode=2, ProviceName="山东", citySource=new List<DP_City>{ 
new DP_City{ 
CityNode=21, CityName="济南" 
}, 
new DP_City{ 
CityNode=22,CityName="德州" 
} 
}}, 
new DP_Provice{ ProviceNode=3, ProviceName="河北", citySource=new List<DP_City>{ 
new DP_City{ 
CityNode=31, CityName="石家庄" 
}, 
new DP_City{ 
CityNode=32,CityName="衡水" 
} 
}} 
}; return source; 
} 
}

具体在Controller中的调用,因为使用的JQuery中的AJAX方式,所以返回的结果类型为Json;
public ActionResult Index() 
{ 
return View("DPShow"); 
} 
List<DP_Provice> source = DPDataSource.InitalData(); public JsonResult GetProvinceSource() 
{ 
if (source == null || source.Count < 0) 
{ 
source = DPDataSource.InitalData(); 
} 
return Json(source, JsonRequestBehavior.AllowGet); 
} 
public JsonResult GetCitySource(string proviceName) 
{ 
source = DPDataSource.InitalData(); 
List<DP_City> citySource = new List<DP_City>(); 
citySource = source.Where(a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource; 
return Json(citySource, JsonRequestBehavior.AllowGet); 
}

数据准备完毕,此时需要Razor视图中进行绑定和展示,代码如下:
@model MvcApplication.Models.DP_Provice 
@{ 
ViewBag.Title = "DPShow"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<script type="text/javascript"> 
$(function myfunction() { 
GetPlant(); 
//初始化省份数据 
$("#ddlProvince").change(function ff() { //设置当省份下拉列表发生变化时,更新城市数据列表 
GetCity(); 
}); 
}); function GetPlant() { 
$("#ddlProvince").empty(); 
var url = "/Dropdown/GetProvinceSource/"; 
$.getJSON(url, function (data) { 
$.each(data, function (i, item) { 
$("<option></option>") 
.val(item["ProviceNode"]) 
.text(item["ProviceName"]) 
.appendTo($("#ddlProvince")); 
}); 
GetCity(); 
}); 
} 
function GetCity() { 
$("#ddlCity").empty(); 
var temp=$("#ddlProvince").val(); 
var url ="@Url.Action("GetCitySource", "Dropdown")" ; 
//使用MVC3中Url.Action 方法参数依次为:aciton ; controller ; area ; 
$.getJSON(url,{"proviceName":temp}, function (data) { 
//中间需要用到参数 所以采用在getJSON方法中实现 
$.each(data, function (i, item) { 
$("<option></option>") 
.val(item["CityNode"]) 
.text(item["CityName"]) 
.appendTo($("#ddlCity")); 
}); 
}); 
} 
</script> 
<! DOCTYPE html /> 
<h2> 
下拉列表联动</h2> 
<table> 
<tr> 
<td> 
<select id="ddlProvince" /> 
</td> 
<td> 
<select id="ddlCity" /> 
</td> 
</tr> 
</table>

说明:
一般来讲,采用MVC实现下拉列表绑定可以有多种方式,主要是数据绑定方式可以使用JQuery中的Ajax 方式,同时也可以使用自定义的基于MVC 的 Url.Acion 方式,个人建议使用基于MVC 的 Url.Acion。
一来是支持方式比较灵活,如果中间涉及到数据类型复杂,可以自定义,实现数据封装;
二来是JQuery 中URL在传递参数时需要格式化,否则将无法找到指定的Action。
如有大家对上述说法有异议或者更好的实现方案,请给予指正或说明,谢谢。
Javascript 相关文章推荐
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
js实现两点之间画线的方法
May 12 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 #Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 #Javascript
js的alert弹出框出现乱码解决方案
Sep 02 #Javascript
javascript中的window.location.search方法简介
Sep 02 #Javascript
js Math 对象的方法
Sep 01 #Javascript
javascript ready和load事件的区别示例介绍
Aug 30 #Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
编写PHP的安全策略
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php object转数组示例
2014/01/15 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
vue实现计步器功能
2019/11/01 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python实现飞机大战微信小游戏
2020/03/21 Python
python绘制简单彩虹图
2018/11/19 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
供用电专业求职信
2014/07/07 职场文书
心理学培训心得体会
2016/01/22 职场文书