html下拉列表选择后自动刷新,基于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();

}

商圈选择

//选中

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

}

});

}

==请选择==

==请选择==

==请选择==

==请选择==

//选择省

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

});

});

});

});

});

});

});

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

{

///

/// 行政区划

///

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("==请选择==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", 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("==请选择==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", 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("==请选择==");

foreach (DataRow dr in dt.Rows)

{

sbHtml.AppendFormat("{1}", 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("==请选择==");

foreach (DataRow dr in dt.Rows)

{

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

}

return Content(sbHtml.ToString());

}

#endregion

}

}

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