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


Posted in jQuery onDecember 06, 2017

本文实例为大家分享了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

  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
You might like
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
快速了解Python中的装饰器
2018/01/11 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
python实现多张图片拼接成大图
2019/01/15 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
检察院起诉书
2015/05/20 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
redis缓存存储Session原理机制
2021/11/20 Redis
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL