发布于 2016-09-23 10:18:40 | 102 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

点击一个下拉框，则另一个下拉框的值发生对应变化。如：选择中国，则另个一下拉框里显示中国各个省份，具体实现如下，感兴趣的朋友可以参考下
上次项目中遇到一个需要多个下拉列表联动的操作，今天有空将实现方式整理以便以后参考。
要达到的效果是，点击一个下拉框，则另一个下拉框的值发生对应变化。如：选择中国，则另个一下拉框里显示中国各个省份。
传统的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。
如有大家对上述说法有异议或者更好的实现方案，请给予指正或说明，谢谢。