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

浏览数：47 / 时间：2015年06月09日

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

    }
}