Home > Article > Web Front-end > How to use Ajax to implement non-refresh linkage of drop-down boxes in jQuery

How to use Ajax to implement non-refresh linkage of drop-down boxes in jQuery

亚连Original: 2018-06-22 14:35:042349browse

This article mainly introduces in detail the implementation of non-refresh linkage of drop-down boxes based on jQuery Ajax. It has a certain reference value. Interested friends can refer to it.

The examples in this article share jQuery with everyone. The specific code for Ajax to implement non-refresh linkage of the drop-down box is for your reference. The specific content is as follows

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();
}

<!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", &#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>
</body>
</html>

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

      return Content(sbHtml.ToString());
    }
    #endregion

  }
}

The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

How to implement the observer pattern in JavaScript

##About building the Angular2 development environment (detailed tutorial)

How to develop AngularJS 2 applications using the VS Code editor

About SPA first screen loading optimization in Vue (detailed tutorial)

The above is the detailed content of How to use Ajax to implement non-refresh linkage of drop-down boxes in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement Emrips anti-prime enumeration in javascriptNext article：How to implement Emrips anti-prime enumeration in javascript

See more

How to use Ajax to implement non-refresh linkage of drop-down boxes in jQuery

Related articles