基于jQuery Ajax实现下拉框无刷新联动

2019-11-19 14:46:43

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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", '@provinceId', function () {        getCities('@provinceId', function () {          select("city", '@cityId', function () {            getCounties('@cityId', function () {              select("county", '@countyId', function () {                getAreas('@countyId', function () {                  select("area", '@areaId');                });              });            });          });        });      });    });  </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='-1'>==请选择==</option>");      foreach (DataRow dr in dt.Rows)      {        sbHtml.AppendFormat("<option value='{0}'>{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='-1'>==请选择==</option>");      foreach (DataRow dr in dt.Rows)      {        sbHtml.AppendFormat("<option value='{0}'>{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='-1'>==请选择==</option>");      foreach (DataRow dr in dt.Rows)      {        sbHtml.AppendFormat("<option value='{0}'>{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='-1'>==请选择==</option>");      foreach (DataRow dr in dt.Rows)      {        sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());      }      return Content(sbHtml.ToString());    }    #endregion  }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：javascript实现Emrips反质数枚举的示例代码

下一篇：JS实现登录页密码的显示和隐藏功能