当前位置:首页 >> 建筑/土木 >>

三级联动 使用Jquery实现城市三级数据联动的实例


三级联动 使用Jquery实现城市三级数据联动的实例.txt21春暖花会开!如果你曾经历过冬天,那么你就会有春色!如果你有着信念,那么春天一定会遥远;如果你正在付出,那么总有一天你会拥有花开满圆。使用Jquery实现城市三级数据联动的实例

View:

<script type="text/javascript&q

uot;>
$(document).ready(function() {
GetByJquery();
$("#ddlProvince").change(function() { GetCity() });
$("#ddlCity").change(function() { GetDistrict() });
});

function GetByJquery() {

$("#ddlProvince").empty(); //清空省份SELECT控件

$.getJSON("/ajax/GetProvinceList", function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["ProvinceID"])
.text(item["ProvinceName"])
.appendTo($("#ddlProvince"));
});
GetCity();
});

}

function GetCity() {

$("#ddlCity").empty(); //清空城市SELECT控件
var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["CityID"])
.text(item["CityName"])
.appendTo($("#ddlCity"));
});
GetDistrict();
});
}

function GetDistrict() {
$("#ddlDistrict").empty(); //清空市区SELECT控件
var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();

$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["DistrictID"])
.text(item["DistrictName"])
.appendTo($("#ddlDistrict"));
});
});
}

</script>
<table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table>

Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MvcBBS.Controllers
{
public class AjaxController : Controller
{
//
// GET: /Ajax/

/// <summary>
/// 获取所有[省份]数据
/// </summary>
public ActionResult GetProvinceList()
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为!");
}

BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList();

return Json(modellist);
}

/// <summary>
/// 获取某[省份]的所有[城市]数据
/// </summary>
public ActionResult GetCityList(int id)
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为!");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
return Json(modellist);
}

/// <summary>
/// 获取某[城市]的所有[市区]数据
/// </summary>
public ActionResult GetDistrictList(int id)
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为!");
}

BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id);

return Json(modellist);
}

}
}

我比较喜欢使用三层+工厂模式来读写数据,O/R Mapping不太适合我的要求!我们写的项目经常不是为了方便移植,而是选择明确的数据库,需要更高的性能,更强的业务逻辑!大家看到上面的代码,应该很熟悉,从数据库读数据到List<>中返回,并使有ASP.NET MVC内置的Json方法转换数据并Response.

DAL:

// BLL,Model就不贴出来了!

using System;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using System.Collections.Generic;
using DBUtility; //请先添加引用

namespace MvcBBS.DAL
{
public class Province
{
public Province()
{}

/// <summary>
/// 获取所有省份数据
/// </summary>
/// <returns></returns>
public List<Model.S_Province> GetProvinceList()
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT ProvinceID,ProvinceName ");
strSql.Append(" FROM S_Province ");
List<Model.S_Province> modelList = new List<MvcBBS.Model.S_Province>();
SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
while (dr.Read())
{
Model.S_Province _model = new MvcBBS.Model.S_Province();
_model.ProvinceID = int.Parse(dr["ProvinceID"].ToString());
_model.ProvinceName = dr.GetString(1);
modelList.Add(_model);
}
dr.Close();
return modelList;
}

/// <summary>
/// 获取某省份的所有城市数据
/// </summary>
/// <param name="ProvinceID"></param>
/// <returns></returns>
public List<Model.S_City> GetCityList(int ProvinceID)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT CityID,CityName,ZipCode");
strSql.Append(" FROM S_City ");
strSql.Append(" WHERE ProvinceID=");
strSql.Append(ProvinceID.ToString());

List<Model.S_City> modelList = new List<MvcBBS.Model.S_City>();
SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
while (dr.Read())
{
Model.S_City _model = new MvcBBS.Model.S_City();
_model.CityID = int.Parse(dr["CityID"].ToString());
_model.CityName = dr.GetString(1);
_model.ZipCode = dr.GetString(2);
_model.ProvinceID = ProvinceID;
modelList.Add(_model);
}
dr.Close();
return modelList;
}

/// <summary>
/// 获取某城市的所有市区
/// </summary>
/// <param name="CityID"></param>
/// <returns></returns>
public List<Model.S_District> GetDistrict(int CityID)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT DistrictID,DistrictName");
strSql.Append(" FROM S_District ");
strSql.Append(" WHERE CityID=");
strSql.Append(CityID.ToString());

List<Model.S_District> modelList = new List<MvcBBS.Model.S_District>();
SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString());
while (dr.Read())
{
Model.S_District _model = new MvcBBS.Model.S_District();
_model.DistrictID = int.Parse(dr["DistrictID"].ToString());
_model.DistrictName = dr.GetString(1);
_model.CityID = CityID;
modelList.Add(_model);
}
dr.Close();
return modelList;
}
}
}


相关文章:
JSPHPmysql实现三级联动(专业菜鸟版)
JSPHPmysql实现三级联动(专业菜鸟版)_计算机软件及应用_IT/计算机_专业资料。使用jquery php 读取 mysql数据库动态实现三级select联动显示JS...
php+ajax实现三级联动(以省市县三级联动为例)
案例涉及到数据库,数据库设二级联动和三级联动的效果在 web 上很常见,在网上查了半天资料,写的都丌是很清楚, 无奈,自己写了个,使用 php+ajax 实现三级联动,以...
用JQuery做出三级联动
用JQuery做出三级联动_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 用JQuery做出三级联动_IT/计算机_专业资料。用JQuery做出三级联动...
用jsf实现的省市县三级联动
城市 <h:inputHidden id="one_city" value="#{tcaruserinfo.city}" /> ...JQuery教程实例-Ajax三级... 3页 免费 JS全国省市县三级联动代... 6页 免费...
个人总结:java实现三级联动的数据组装过程
个人总结:java实现三级联动的数据组装过程_计算机软件及应用_IT/计算机_专业资料...(i));// 设置城市名称 /* 封装区域 */ ArrayList<DistrictItem>mDistrict...
AJAX省市县三级联动
AJAX省市县三级联动_计算机软件及应用_IT/计算机_专业资料。AJAX省市县三级联动(jquery) <!DOCTYPE html> 三级联动菜单 select{ width: 120px; height:...
找了好几才找到的省市区(县)三级联动代码(js+无刷新)
省市区三级联动代码(js)以下是 area.js 中的代码: /* * 全国三级城市联动 js 版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = ...
二级省市级联jQuery简单实现
最简单 jQuery 实现二级省市级联,三级级联可依此扩展...内的文本,来填充不同的城市,由此实现二级联动。 ...JQuery 渐入渐出简单实例... 暂无评价 1页 免费 ©...
.net实现三级联动
.net实现三级联动_IT/计算机_专业资料。。net实现三级联动效果 ext 框架今日...三级联动(修订版) 53页 1下载券 三级联动 使用Jquery实现... 3页 免费喜欢...
Ajax实现三级联动
Ajax实现三级联动_IT/计算机_专业资料。Ajax实现三级联动今日推荐 88...三级联动 3页 1下载券 ajax三级联动js 4页 免费©2014 Baidu 使用百度前必读...
更多相关标签:
jquery实现三级联动 | 三级联动下拉列表实例 | jquery省市区三级联动 | jquery 三级联动 | jquery三级联动菜单 | jquery三级联动插件 | jquery 地区三级联动 | jquery省市县三级联动 |