您好,登錄后才能下訂單哦!
這篇文章主要介紹基于jQuery Ajax怎么實(shí)現(xiàn)下拉框無刷新聯(lián)動(dòng),文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
具體內(nèi)容如下
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 () { } }); } //獲取區(qū)縣列表 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(); }); }); //選擇區(qū)縣 $("#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> /// 行政區(qū)劃 /// </summary> public class AreaController : AdminBaseController { #region 構(gòu)造函數(shù)及變量 private SQLiteHelper.SQLiteHelper sqliteHelper; private AreaDal areaDal; public AreaController() { sqliteHelper = new SQLiteHelper.SQLiteHelper(); areaDal = new AreaDal(); } #endregion #region 行政區(qū)劃商圈級聯(lián)選擇頁面 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 根據(jù)省獲取市 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 根據(jù)市獲取區(qū)縣 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 根據(jù)區(qū)縣獲取商圈 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 } }
jquery是一個(gè)簡潔而快速的JavaScript庫,它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件,是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫,以便快速開發(fā)網(wǎng)站。
以上是“基于jQuery Ajax怎么實(shí)現(xiàn)下拉框無刷新聯(lián)動(dòng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。