jQuery Ajax实现下拉框无刷新联动
HTML代码：
@{
Layout = null;
}
@using DAL;
@using System.Data;
@{
AreaDal areaDal = new AreaDal();
string areaId = ViewBag.areaId;
DataRow drArea = areaDal.GetArea(areaId);
string countyId = drArea == null ? "-1" : drArea["countyId"].ToString();
DataRow drCounty = areaDal.GetCounty(countyId);
string cityId = drCounty == null ? "-1" : drCounty["cityId"].ToString();
DataRow drCity = areaDal.GetCity(cityId);
string provinceId = drCity == null ? "-1" : drCity["provinceId"].ToString();
}
<!DOCTYPE html>
<html>
<head>
<title>商圈选择</title>
<script type="text/javascript">
//选中
function select(selId, id, callback) {
$("#" + selId).val(id);
if (callback) callback();
}
//获取省列表
function getProvinces(callback) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/Area/GetProvinces")",
data: {},
success: function (text) {
$("#province").html(text);
if (callback) callback();
},
error: function () {
}
});
}
//获取市列表
function getCities(pid, callback) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/Area/GetCities")",
data: { "provinceId": pid, },
success: function (text) {
$("#city").html(text);
if (callback) callback();
},
error: function () {
}
});
}
//获取区县列表
function getCounties(pid, callback) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/Area/GetCounties")",
data: { "cityId": pid, },
success: function (text) {
$("#county").html(text);
if (callback) callback();
},
error: function () {
}
});
}
//获取商圈列表
function getAreas(pid, callback) {
$.ajax({
type: "POST",
url: "@Url.Content("~/Backstage/Area/GetAreas")",
data: { "countyId": pid, },
success: function (text) {
$("#area").html(text);
if (callback) callback();
},
error: function () {
}
});
}
</script>
</head>
<body>
<select id="province">
<option value="-1">==请选择==</option>
</select>
<select id="city">
<option value="-1">==请选择==</option>
</select>
<select id="county">
<option value="-1">==请选择==</option>
</select>
<select id="area">
<option value="-1">==请选择==</option>
</select>
<script type="text/javascript">
//选择省
$("#province").change(function () {
var id = $(this).find("option:selected").val();
getCities(id, function () {
$("#city").change();
});
});
//选择市
$("#city").change(function () {
var id = $(this).find("option:selected").val();
getCounties(id, function () {
$("#county").change();
});
});
//选择区县
$("#county").change(function () {
var id = $(this).find("option:selected").val();
getAreas(id, function () {
$("#area").change();
});
});
getProvinces(function () {
select("province", '@provinceId', function () {
getCities('@provinceId', function () {
select("city", '@cityId', function () {
getCounties('@cityId', function () {
select("county", '@countyId', function () {
getAreas('@countyId', function () {
select("area", '@areaId');
});
});
});
});
});
});
});
</script>
</body>
</html>
Controller代码：
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using DAL; namespace Controllers.Backstage
{
/// <summary>
/// 行政区划
/// </summary>
public class AreaController : AdminBaseController
{
#region 构造函数及变量
private SQLiteHelper.SQLiteHelper sqliteHelper;
private AreaDal areaDal; public AreaController()
{
sqliteHelper = new SQLiteHelper.SQLiteHelper();
areaDal = new AreaDal();
}
#endregion #region 行政区划商圈级联选择页面
public ActionResult AreaSelect()
{
return PartialView();
}
#endregion #region 获取全部省
public ActionResult GetProvinces()
{
DataTable dt = areaDal.GetProvincesAll(); StringBuilder sbHtml = new StringBuilder();
sbHtml.Append("<option value='-1'>==请选择==</option>");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
} return Content(sbHtml.ToString());
}
#endregion #region 根据省获取市
public ActionResult GetCities(string provinceId)
{
DataTable dt = areaDal.GetCities(provinceId); StringBuilder sbHtml = new StringBuilder();
sbHtml.Append("<option value='-1'>==请选择==</option>");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
} return Content(sbHtml.ToString());
}
#endregion #region 根据市获取区县
public ActionResult GetCounties(string cityId)
{
DataTable dt = areaDal.GetCounties(cityId); StringBuilder sbHtml = new StringBuilder();
sbHtml.Append("<option value='-1'>==请选择==</option>");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
} return Content(sbHtml.ToString());
}
#endregion #region 根据区县获取商圈
public ActionResult GetAreas(string countyId)
{
DataTable dt = areaDal.GetAreas(countyId); StringBuilder sbHtml = new StringBuilder();
sbHtml.Append("<option value='-1'>==请选择==</option>");
foreach (DataRow dr in dt.Rows)
{
sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
} return Content(sbHtml.ToString());
}
#endregion }
}
jQuery Ajax实现下拉框无刷新联动的更多相关文章
- jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...
- 使用jquery Ajax异步刷新 下拉框
一个下拉框 <label>产品类型:</label> <select id="protype" name="protype" on ...
- ajax实现下拉菜单无刷新加载更多
$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...
- 简单JS多级下拉框无刷新
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery之双下拉框
双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- jQuery操作select下拉框的text值和value值的方法
1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
- JQuery操作select下拉框
JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...
随机推荐
- 开源中国（oschina）的Git托管
一些废话 对于使用CVS/SVN出身的人来说,Git始终有点难上手(比如我),因为概念较多,一时理不清,尽管网上已经有很多教程,其实后来我发现,要掌握它的办法就是使用它,着手开始用它做源码管理,有问题 ...
- win10最新预览版9926使用评估
1月21日微软发布会,终于在周一发布了新的预览版本Build 9926,这个并不是客户预览版,仍然是开发者预览版,如图: 如果要查看自己的windows 10是那个版本,打开运行窗口,输入如下命令: ...
- mssql 小技巧
代码1:查看sql的执行时间 SET STATISTICS PROFILE ON SET STATISTICS IO ON SET STATISTICS TIME ON select * from M ...
- python 模块加载
python 模块加载 本文主要介绍python模块加载的过程. module的组成 所有的module都是由对象和对象之间的关系组成. type和object python中所有的东西都是对象,分为 ...
- C++虚函数表
大家知道虚函数是通过一张虚函数表来实现的.在这个表中,主要是一个类的虚函数的地址表,这张表解决了继承.覆盖的问题,其内容真是反应实际的函数.这样,在有虚函数的类的实例中,这个表分配在了这个实例的内存中 ...
- 我也说百度和google
对于程序员,最好的老师恐怕还是百度或者google或一些专业的it社区.网站了罢! 之前曾听到这样的一句话, 文艺程序员用Google Scholar/Scirus/stackoverflow.普通程 ...
- Redis Geo: Redis新增位置查询功能
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/144.html 移动互联网增进了人与人之间的联系,其中基于位置信息的服务( ...
- Java程序员的日常 —— Java类加载中的顺序
之前说过Java中类的加载顺序,这次看完继承部分,就结合继承再来说说类的加载顺序. 继承的加载顺序 由于static块会在首次加载类的时候执行,因此下面的例子就是用static块来测试类的加载顺序. ...
- Atitit 发帖机实现(2)---usrQBN2243 文本解析到对象协议规范
Atitit 发帖机实现(2)---usrQBN2243 文本解析到对象协议规范 文本内容 ###注释 标题:标题标题标题标题标题1 人数:5 月薪:2000-3000 内容: 内容内容内 容内容内容 ...
- Atitit usrQBM1603短信验证码规范
Atitit usrQBM1603短信验证码规范 短信验证码扩展至短信服务和验证码服务1 主要方法1 参考模板1 短信验证码扩展至短信服务和验证码服务 主要方法 Line 27: public cla ...