zoukankan      html  css  js  c++  java
  • 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>
    View Code

    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
    
        }
    }
    View Code
  • 相关阅读:
    IDEA在debug时修改变量值
    CSS覆盖公共样式中的某个属性
    POI获取单元格的宽和高
    MySQL将一张表的某些列数据,复制到另外一张表,并且修改某些内容
    哈希是什么?为什么哈希存取比较快?
    工厂模式
    观察者模式
    instanceof判断的对象可以是接口
    JeeSite框架中httpSession.invalidate();无效
    HSQL可视化工具
  • 原文地址:https://www.cnblogs.com/s0611163/p/4187127.html
Copyright © 2011-2022 走看看