打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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    }}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
asp.net+jquery+ztree实现树形选择
Asp.Net Web控件 (一)(上传控件) - steven hu - 博客园
银行网点列表生成
OSX下的LuaJIT测试
Ajax
Javascript數組操作 | 晚晴幽草軒
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服