基于jQuery Ajax实现下拉框无刷新联动       这篇文章主要为大家详细介绍了基于jQuery Ajax实现下拉框无刷新联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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) {
 $("#(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) {
 $("#(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) {
 $("#(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) {
 $("#(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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。