基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了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 ajax实现下拉框三级无刷新联动,且保存保持选中值状态
功能:省,市,地区三级联动,采用jquery ajax 取数据绑定,页面刷新或提交后选定值能保存并保持选中状态 把以下代码放在一个单独的js文件中,在页面上引用即可调用 复制代码 代码如下: //获取cookie值function readCookie(name) { var cookieValue = ""; var search = name + "="; if (document.cookie.length > 0) {
-
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
导读: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 不废话,直接上代码,整段代码分为前后两段代码,具体代码如下所示. 前台: <?php <br>$category=$this->getMyVal('category',$_GET);<br>
-
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--
-
jQuery+AJAX实现无刷新下拉加载更多
随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css 和简单js交互. js code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t
-
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
首先来看工程结构图: 项目所需要的包,如下所示: JSP代码: <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServe
-
基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了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 == nu
-
用Jquery实现多级下拉框无刷新的联动
最开始准备用.NET只带的AJAX实现,发现达不到想要的效果.后来采取JQuery中AJAX功能,通过异步调用C#写的web服务实现. load()方法可以说是JQuery中最简单的AJAX方法,它用于获取目标服务器的响应并将结果显示到页面上.load方法就是Jquery对AJAX的包装.还可以使用$.post()和$.get()来实现post或get方式的AJAX调用,对于复杂的情况,还可以使用AJAX()方法.
-
基于jQuery的select下拉框选择触发事件实例分析
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1
-
基于jquery的checkbox下拉框插件代码
option_check.js代码 : 复制代码 代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclas
-
jquery实现select下拉框美化特效代码分享
这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码. 为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&
-
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private static String url; private static String user; private static String password;
-
基于Ajax实现下拉框联动显示数据
公司做项目的时候,需要用到下拉框联动显示数据的功能,索性利用Ajax来实现,看到时间比较充裕,就没去找demo自己去想方法写了.纯自己的想法,有些可能比较弱智,希望不要见笑. 页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style=&q
-
Jquery Easyui自定义下拉框组件使用详解（21）
本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下 加载方式 JS调用加载 自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>
-
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