基于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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery实现放大镜案例
Oct 19 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实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python ddt实现数据驱动
2018/03/14 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
浅谈python3中input输入的使用
2019/08/02 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
10个顶级Python实用库推荐
2021/03/04 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
数据库专业英语
2012/11/30 面试题
心得体会怎么写
2013/12/30 职场文书
农贸市场管理制度
2014/01/31 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
工作经历证明范本
2015/06/15 职场文书
2019大学生实习报告
2019/06/21 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书