Ajax怎么实现下拉框无刷新联动-js教程-PHP中文网

这次给大家带来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();
}
nbsp;html>


  <title>商圈选择</title>
  <script>
    //选中
    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>
  <select>
    <option>==请选择==</option>
  </select>
  <select>
    <option>==请选择==</option>
  </select>
  <select>
    <option>==请选择==</option>
  </select>
  <select>
    <option>==请选择==</option>
  </select>
  <script>
    //选择省
    $("#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", &#39;@provinceId&#39;, function () {
        getCities(&#39;@provinceId&#39;, function () {
          select("city", &#39;@cityId&#39;, function () {
            getCounties(&#39;@cityId&#39;, function () {
              select("county", &#39;@countyId&#39;, function () {
                getAreas(&#39;@countyId&#39;, function () {
                  select("area", &#39;@areaId&#39;);
                });
              });
            });
          });
        });
      });
    });
  </script>

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>==请选择==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option>{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>==请选择==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option>{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>==请选择==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option>{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>==请选择==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
      }
      return Content(sbHtml.ToString());
    }
    #endregion
  }
}

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