cari

Rumah >hujung hadapan web >tutorial js >在jQuery中如何使用Ajax实现下拉框无刷新联动

在jQuery中如何使用Ajax实现下拉框无刷新联动

亚连
亚连asal
2018-06-22 14:35:042415semak imbas

这篇文章主要为大家详细介绍了基于jQuery Ajax实现下拉框无刷新联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery 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", &#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代码：

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

  }
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JavaScript中如何实现观察者模式

有关Angular2开发环境搭建（详细教程）

使用VS Code编辑器如何开发AngularJS 2应用程序

在Vue中有关SPA首屏加载优化（详细教程）

Atas ialah kandungan terperinci 在jQuery中如何使用Ajax实现下拉框无刷新联动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在javascript中如何实现Emrips反质数枚举Artikel seterusnya：在JS中如何实现登录页密码的显示和隐藏

Artikel berkaitan

Lihat lagi