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

    }
}

时间: 2024-10-09 05:09:56

jQuery Ajax实现下拉框无刷新联动的相关文章

使用jquery Ajax异步刷新 下拉框

一个下拉框 <label>产品类型:</label> <select id="protype" name="protype" onchange="getNameList()"> <option value="">--请选择--</option> </select> 响应上一个下拉框的结果 的另一个下拉框 <label>产品名称:</lab

ajax实现下拉菜单无刷新加载更多

1 $(function() { 2 var page = 1; 3 var discount = $('#discount'); 4 var innerHeight = window.innerHeight; 5 var timer2 = null; 6 $.ajax({ 7 url: '/lightapp/marketing/verify/apply/list?page=1', 8 type: 'GET', 9 dataType: 'json', 10 timeout: '1000', 11

jQuery之双下拉框

双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPEhtml> <html> <head> <title>jq

JS/JQuery操作select下拉框

一.js 操作select 下拉框 var selObj = 下拉框对象 1. 移除所有项:selObj.options.length = 0; 2. 移除下拉框中的一项:selObj.options.remove(index); “index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进 也可利用循环,移除所有项: var length = selObj.options.length; for(var i=length-1;i>=0;i-

jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

layui与jquery冲突导致下拉框无法显示的解决方法

1.背景: 在使用 layui 框架写 jsp 的时候,使用 ajax 传递数据来刷新表单,发现使用 ajax 引用外部的jquery 和 layui 自带的jquery中,可能是 $ 导致select 下拉框中的option 没法在layui中正常使用(即数据传过去了,但是点击下拉框没有任何数据) 2.解决 查了一下网上的解决方法.有个解决方法是 在layui.js之前引用其他jquery .但是发现 并没有什么卵用. 后来发现,ajax传递数据在加载页面之后,导致了导入的option没有在第

Jquery动态设置下拉框selected --(2018 08/12-08/26周总结)

1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: <select id="selectID "> <option>选择A</option> <option>选择B</option> <option>选择C</option> </select> //

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

jquery Combo Select 下拉框可选可输入插件

Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行检索过滤,同时支持键盘控制. 支持浏览器: Safari, Chrome, Firefox, Opera iOS, Android, IE Mobile Internet Explorer IE 8 and above 开源地址:http://www.oschina.net/p/combo-sele