Ajax怎么实现下拉框无刷新联动

来源：动视网责编：小采时间：2020-11-27 19:59:39

Ajax怎么实现下拉框无刷新联动

Ajax怎么实现下拉框无刷新联动:这次给大家带来Ajax怎么实现下拉框无刷新联动，Ajax实现下拉框无刷新联动的注意事项有哪些，下面就是实战案例，一起来看一下。HTML代码：@{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new Area

推荐度：

点击下载本文 文档为doc格式

导读Ajax怎么实现下拉框无刷新联动:这次给大家带来Ajax怎么实现下拉框无刷新联动，Ajax实现下拉框无刷新联动的注意事项有哪些，下面就是实战案例，一起来看一下。HTML代码：@{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new Area

这次给大家带来Ajax怎么实现下拉框无刷新联动，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
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Ajax怎么实现下拉框无刷新联动

推荐度：

点击下载本文 文档为doc格式

标签：实现联动 ajax

热门焦点

Ajax怎么实现下拉框无刷新联动

Ajax怎么实现下拉框无刷新联动

Ajax怎么实现下拉框无刷新联动

最新推荐

猜你喜欢

热门推荐