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
  • 相关阅读:
    37. Sudoku Solver(js)
    36. Valid Sudoku(js)
    35. Search Insert Position(js)
    34. Find First and Last Position of Element in Sorted Array(js)
    33. Search in Rotated Sorted Array(js)
    32. Longest Valid Parentheses(js)
    函数的柯里化
    俞敏洪:我和马云就差了8个字
    vue路由传值params和query的区别
    简述vuex的数据传递流程
  • 原文地址:https://www.cnblogs.com/s0611163/p/4187127.html
Copyright © 2011-2022 走看看