实现效果如图:

一、声明市、县、乡对应的下拉控件select

 <div class="form-group">
<label class="col-sm-1 control-label" for="ds_username">
所选区域:</label>
<div class="col-sm-2">
<select id="sl_shi" class="form-control">
<option value=""></option>
</select>
</div>
<div class="col-sm-2">
<select id="sl_xian" class="form-control">
</select>
</div>
<div class="col-sm-2">
<select id="sl_xiang" class="form-control">
</select>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-primary">
查询</button>
</div>
</div>

二、JS代码:三级联动改变上一级的值触发下一级的数据绑定,因为首次绑定不会触发改变事件,所以默认一个空列,让用户自己选择。

  <script type="text/javascript">
$(function () {//默认绑定省
ShiBind();
//绑定事件
$("#sl_shi").change(function () {
XianBind();
});
$("#sl_xian").change(function () {
XiangBind();
});
});
function ShiBind() {
$.ajax({
type: 'get',
url: 'jgdx.ashx?action=bindShi',
dataType: 'json',
success: function (datas) {//返回list数据并循环获取
var select = $("#sl_shi");
for (var i = ; i < datas.length; i++) {
select.append("<option value='" + datas[i].id + "'>"
+ datas[i].shi + "</option>");
}
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
}
});
}
function XianBind() {
var shi = $("#sl_shi").val();
//判断下拉框选中的值是否为空
if (shi == "") {
return;
}
$("#sl_xian").html("");
$("#sl_xiang").html("");
$.ajax({
type: "POST",
url: "jgdx.ashx",
data: { "action": "bindXian", "id": shi },
dataType: "JSON",
async: false,
success: function (datas) {//返回list数据并循环获取
var select = $("#sl_xian");
select.append("<option value='0'> </option>");
for (var i = ; i < datas.length; i++) {
select.append("<option value='" + datas[i].id + "'>"
+ datas[i].xian + "</option>");
}
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
}
});
}
function XiangBind() {
var shi = $("#sl_shi").val();
var xian = $("#sl_xian").val();
if (xian == "") {
return;
}
$("#sl_xiang").html("");
$.ajax({
type: "POST",
url: "jgdx.ashx",
data: { "action": "bindXiang", "xian": xian, "shi": shi },
dataType: "JSON",
async: false,
success: function (datas) {//返回list数据并循环获取
var select = $("#sl_xiang");
select.append("<option value='0'> </option>");
for (var i = ; i < datas.length; i++) {
select.append("<option value='" + datas[i].id + "'>"
+ datas[i].xiang + "</option>");
}
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
}
});
}
</script>

三、后台代码:从数据库读取数据,转换为json串,返回前台。

        public void ProcessRequest(HttpContext context)
{
string output = "";
string action = context.Request["action"].ToString();switch (action)
{case "bindShi":
output = BindShi(); //返回json格式:[{"id":"238","shi":"滨州市"},{"id":"236","shi":"德州市"}]
break;
case "bindXian":
output = BindXian(context); //[{"id":"2525","xian":"城阳区"},{"id":"2534","xian":"黄岛区"}]
break;
case "bindXiang":
output = BindXiang(context); //[{"id":"21195","xiang":"岙山卫镇"},{"id":"21191","xiang":"北安街道"}]
break;
default:
break;
}
context.Response.ContentType = "text/plain";
context.Response.Write(output);
}

C# 基于Bootstrap的三级联动的更多相关文章

  1. 基于JQ的三级联动菜单选择

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  3. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

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

    //服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...

  5. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

  6. 基于thinkphp和ajax的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  7. 【巷子】---vue基于mint-ui三级联动---【vue】

    一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...

  8. android:省市县三级联动(基于json和spring)

    一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json ...

  9. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

随机推荐

  1. c标准头文件

    好多C语言库函数参考还是用的TC的库函数参考,因此特地把现在C语言(C99)标准库函数的24个头文件列表如下:assert.h types.h(C99)  signal.h  stdlib.h   c ...

  2. js--DOM&BOM总结思维导图---2017-03-24

  3. python笔记之异常

    异常 內建异常在exceptions模块内,使用dir函数列出模块的内容. 自定义异常类:继承基类Exception. 异常可以使用raise语句引发,可以使用try ... except ... e ...

  4. CVPR2018: Unsupervised Cross-dataset Person Re-identification by Transfer Learning of Spatio-temporal Patterns

    论文可以在arxiv下载,老板一作,本人二作,也是我们实验室第一篇CCF A类论文,这个方法我们称为TFusion. 代码:https://github.com/ahangchen/TFusion 解 ...

  5. parted分区和挂载及非交互式操作

    author : headsen  chen date : 2017-11-17  09:45:36 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,将磁盘上原有的分区删除掉: 进入:#pa ...

  6. Spark ML源码分析之二 从单机到分布式

            前一节从宏观角度给大家介绍了Spark ML的设计框架(链接:http://www.cnblogs.com/jicanghai/p/8570805.html),本节我们将介绍,Spar ...

  7. Java中instanceof关键字的用法

    Java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. instanc ...

  8. ~psd面试 求最长回文序列 DP求解

    链接:https://www.nowcoder.com/acm/contest/90/D来源:牛客网 掌握未来命运的女神 psd 师兄在拿了朝田诗乃的 buff 后决定去实习. 埃森哲公司注册成立于爱 ...

  9. JSON Web Token - 在Web应用间安全地传递信息

    转载自:http://blog.leapoahead.com/2015/09/06/understanding-jwt/ JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使 ...

  10. JVM学习五:JVM之类加载器之编译常量和主动使用

    在学习了前面几节的内容后,相信大家已经对JAVA 虚拟机 加载类的过程有了一个认识和了解,那么本节,我们就继续进一步巩固前面所学知识和特殊点. 一.类的初始化回顾 类在初始化的时候,静态变量的声明语句 ...