select联动(C#+.NET MVC+Jquery)
1.实现效果
问题重述
实现类似于选中省份select后,城市select自动绑定该省份的城市列表。
方法陈述
前台jquery利用后台返回的json数据对象,遍历数据项对select进行叠加option标签,并绑定value和text属性。
简要代码
DAL层(BLL层)
//获取省份列表
public List<province> GetProList(){}
//根据省份外键获取城市列表
public List<city> GetCitList(int city_prce_id){}
表现层
/// <summary>
/// 获取省份
/// </summary>
/// <returns>Json</returns>
public ActionResult GetProList()
{
BLL.ProCitService ProCitService = new BLL.ProCitService();
List<province> list = ProCitService.GetProList();
return Json(list, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// 根据省份获取城市
/// </summary>
/// <param name="id"></param>
/// <returns>Json</returns>
public ActionResult GetCitList(string id)
{
BLL.ProCitService ProCitService=new BLL.ProCitService();
List<city> list = ProCitService.GetCitList(int.Parse(id));
return Json(list, JsonRequestBehavior.AllowGet);
}
前台
<script type="text/javascript">
$(function () {
GetProList();
$('#province').change(function () {
changeCity();
});
});
function GetProList()
{
$.post("/Login/GetProList", function (data) {
$('#province').empty();
$('#province').append($('<option></option>').val("").text("请选择").attr("selected", true));
$.each(data, function (i, item) {
$('#province').append($('<option></option>').val(item.prce_id).text(item.prce_name));
});
});
}
function emptyCity()
{
$('#city').empty();
$('#city').append($('<option></option>').val('').text('请选择'));
}
function changeCity()
{
var selectedPrceId = $.trim($('#province option:selected').val());
if (selectedPrceId.length == 0) {
emptyCity();
}
else {
$.post("/Login/GetCitList", { id: selectedPrceId }, function (data) {
$('#city').empty();
$.each(data, function (i, item) {
$('#city').append($('<option></option>').val(item.city_id).text(item.city_name));
});
});
}
}
</script>
杂项
不选用数组,而选择Json
Json可表现的内容更丰富,更方便传输与重组,常用于跨平台、跨语言的数据交互。
是一种结构化的,轻量级的全独立于语言的,基于文本数据传输格式,在很多场合下来代替XML文件格式,相比xml更小,更便于机器解析。
Json可以方便实现多维数组的功能。
数组用于在单个变量中存储多个相同类型值,方便程序操作。
Json数据定义格式[{key:value,key1:value1},{}]
数组数据定义格式[key=value,key1=value1]
Jquery知识
$.post(提交路径,{参数名称:参数},function(data){});
$.each(data, function (i, item){}); //i=>数据项的下标,item=>数据项(item.username=>数据项中的username字段)