在jQuery中如何使用Ajax实现下拉框无刷新联动

2020-11-27 来源：飒榕旅游知识分享网

这篇文章主要为大家详细介绍了基于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) {
 $("#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

 }
}

上面是我整理给大家的，希望今后会对大家有帮助。

在JavaScript中如何实现观察者模式

有关Angular2开发环境搭建（详细教程）

使用VS Code编辑器如何开发AngularJS 2应用程序

在Vue中有关SPA首屏加载优化（详细教程）

显示全文

全部栏目

在jQuery中如何使用Ajax实现下拉框无刷新联动