本文實例為大家分享了jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

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();

}

商圈選擇

//選中

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 () {

}

});

}

//獲取區(qū)縣列表

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 () {

}

});

}

==請選擇==

==請選擇==

==請選擇==

==請選擇==

//選擇省

$("#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();

});

});

//選擇區(qū)縣

$("#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');

});

});

});

});

});

});

});

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

{

///

/// 行政區(qū)劃

///

public class AreaController : AdminBaseController

{

#region 構(gòu)造函數(shù)及變量

private SQLiteHelper.SQLiteHelper sqliteHelper;

private AreaDal areaDal;

public AreaController()

{

sqliteHelper = new SQLiteHelper.SQLiteHelper();

areaDal = new AreaDal();

}

#endregion

#region 行政區(qū)劃商圈級聯(lián)選擇頁面

public ActionResult AreaSelect()

{

return PartialView();

}

#endregion

#region 獲取全部省

public ActionResult GetProvinces()

{

DataTable dt = areaDal.GetProvincesAll();

StringBuilder sbHtml = new StringBuilder();

sbHtml.Append("==請選擇==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", dr["id"].ToString(), dr["name"].ToString());

}

return Content(sbHtml.ToString());

}

#endregion

#region 根據(jù)省獲取市

public ActionResult GetCities(string provinceId)

{

DataTable dt = areaDal.GetCities(provinceId);

StringBuilder sbHtml = new StringBuilder();

sbHtml.Append("==請選擇==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", dr["id"].ToString(), dr["name"].ToString());

}

return Content(sbHtml.ToString());

}

#endregion

#region 根據(jù)市獲取區(qū)縣

public ActionResult GetCounties(string cityId)

{

DataTable dt = areaDal.GetCounties(cityId);

StringBuilder sbHtml = new StringBuilder();

sbHtml.Append("==請選擇==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", dr["id"].ToString(), dr["name"].ToString());

}

return Content(sbHtml.ToString());

}

#endregion

#region 根據(jù)區(qū)縣獲取商圈

public ActionResult GetAreas(string countyId)

{

DataTable dt = areaDal.GetAreas(countyId);

StringBuilder sbHtml = new StringBuilder();

sbHtml.Append("==請選擇==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", dr["id"].ToString(), dr["name"].ToString());

}

return Content(sbHtml.ToString());

}

#endregion

}

}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持。

總結(jié)

以上是生活随笔為你收集整理的jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。