基于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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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
VOLVO车载收音机
2021/03/02 无线电
初品cakephp 入门基础
2012/02/16 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
js module大战
2019/04/19 Javascript
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
英文简历中的自我评价
2013/10/06 职场文书
中学生运动会入场词
2014/02/12 职场文书
房地产广告词大全
2014/03/19 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
大学生个人学习总结
2015/02/15 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
地道战观后感500字
2015/06/04 职场文书
2019求职信大礼包
2019/05/15 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
python装饰器代码解析
2022/03/23 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python