Heim > Artikel > Web-Frontend > So verwenden Sie Ajax, um eine nicht aktualisierungsfreie Verknüpfung von Dropdown-Feldern in jQuery zu implementieren

So verwenden Sie Ajax, um eine nicht aktualisierungsfreie Verknüpfung von Dropdown-Feldern in jQuery zu implementieren

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

Dieser Artikel stellt hauptsächlich die Implementierung der Nicht-Aktualisierungsverknüpfung basierend auf jQuery Ajax vor. Interessierte Freunde können darauf verweisen

Das Beispiel in diesem Artikel teilt jQuery mit allen. Der spezifische Code für Ajax zur Implementierung der Nicht-Aktualisierungsverknüpfung des Dropdown-Felds dient als Referenz. Der spezifische Inhalt ist wie folgt:

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

  }
}

Das Obige habe ich für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So implementieren Sie das Beobachtermuster in JavaScript

Über die Einrichtung der Angular2-Entwicklungsumgebung (ausführliches Tutorial)

So entwickeln Sie AngularJS 2-Anwendungen mit dem VS-Code-Editor

Über die Optimierung des ersten Bildschirmladens von SPA in Vue (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax, um eine nicht aktualisierungsfreie Verknüpfung von Dropdown-Feldern in jQuery zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die Emrips-Anti-Prime-Aufzählung in JavascriptNächster Artikel：So implementieren Sie die Emrips-Anti-Prime-Aufzählung in Javascript

In Verbindung stehende Artikel

Mehr sehen