基于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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
Javascript实现字数统计
Jul 03 Javascript
java必学必会之static关键字
Dec 03 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
js实现自定义进度条效果
Mar 15 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
vue-swiper的使用教程
Aug 30 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
php array_search() 函数使用
2010/04/13 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP解析RSS的方法
2015/03/05 PHP
js function定义函数使用心得
2010/04/15 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python之yield和Generator深入解析
2019/09/18 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
小学运动会口号
2014/06/07 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
出国留学自荐信模板
2015/03/06 职场文书
员工安全责任协议书
2016/03/22 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android