How to achieve non-refresh linkage of drop-down box with Ajax

This time I will show you how to implement non-refresh linkage of drop-down boxes with Ajax. What are the precautions for Ajax to implement non-refresh linkage of drop-down boxes. Here is a practical case, let’s take a look.

HTML code:

@{
  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 code:

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
  }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How jQuery controls dynamic page elements

How to write ajax requests with the highest performance in jQuery

How two zTree interact with each other

The above is the detailed content of How to achieve non-refresh linkage of drop-down box with Ajax. For more information, please follow other related articles on the PHP Chinese website!