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...}); //为 ...
随机推荐
- 一个App完成入门篇（四）- 完成反馈页面
上一节中我们学会了如何通过点击不同按钮切换页面,这节专注于完成反馈页面的功能以及细节动画. 导入项目 添加新组件 同步新组件 完成页面布局 输入时加动画效果 弹出日期选择 直接引用UI页面 将要学习的 ...
- 小计C/C++问题（1）
本文主要记录了以下2个问题: 表达式中,有符号变量和无符号变量的转化问题 C/C++中,main函数执行完以后,还执行了什么语句? 这里简单的说一下我的环境:Win7 32位,Qt creator 5 ...
- React Native02-开始运行 Android篇
1. 开始运行 1)用命令进入到新建的文件目录下,比如HelloWorld,再输入 react-native start: 在等待一段时间后,我们看到最后面有个地址,说明已经运行成功了. 我们输入地址 ...
- 知方可补不足~SQL2005使用ROW_NUMBER() OVER()进行数据分页
回到目录 数据分页是这个经常说的东西,无论在WEBForm还是WinForm中它都会被单独拿出来,或者是公用组件,或者是公用类库,反正对于数据分页这个东西,总是我们关注的一个话题,但事实上,数据分页归 ...
- flow.ci Beta 上线，将开发工作流自动化
说起未来,我们会想到自动.智能.机器人...,希望可以从眼前重复繁琐的事情中解放出来,让"机器人"自动智能地帮我们做更多的事情:希望开发可以更自动化.智能化.社会化,更少的资源浪费 ...
- springSide部署出现AnnotationConfigUtils.processCommonDefinitionAnnotations(…) is not public!
AnnotationConfigUtils.processCommonDefinitionAnnotations(…) is not public! Make sure you're using Sp ...
- 建站集成软件包 XAMPP搭建后台系统与微信小程序开发
下载安装XAMPP软件,运行Apache和MySQL 查看项目文件放在哪个位置可以正常运行 然后访问localhost即可 下载weiphp官网的weiapp(专为微信小程序开发使用)放在htdocs ...
- Unity3D Editor模式下批量修改prefab
最经遇到一个需要批量修改已经做好的prefab的问题,查了一些资料最终实现了但是还是不够完美,通过学习也发现unity的编辑器功能还是非常强大的.废话不多说直接上代码: [ExecuteInEditM ...
- 【转】Spring MVC中Session的正确用法之我见
Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...
- Windows 10 开始菜单修改程序
Windows 10虽然恢复了开始菜单,但与经典的菜单相比还是有些变化.对于菜单项中名称过长的只能显示一部分,比如SQL Server Management Studio这种名称比较长的菜单项名称,常 ...