实现效果如图:

一、声明市、县、乡对应的下拉控件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. Hybrid App混合模式开发的了解

    Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具"Native App良好用户交互体验的优势"和"Web Ap ...

  2. 多个input连接在一起的时候如何实现输入一个数字跳入下一个

    这个是页面内容  ,我分了12格子,作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面  这样配上背景图,看着是一个大的输入框. <div id="A ...

  3. Maven-02: 依赖

    其实一个依赖声明可以包含如下的一些元素: groupId,artifactId,version:依赖的基本坐标. type:依赖的类型,对应于项目坐标定义的packaging.大多数情况下,该元素不必 ...

  4. 利用spring AOP实现每个请求的日志输出

    前提条件: 除了spring相关jar包外,还需要引入aspectj包. <dependency> <groupId>org.aspectj</groupId> & ...

  5. Android_Jar mismatch! Fix your dependencies

    在用adt开发安卓时,添加依赖的library后,经常会出现错误,Jar mismatch! Fix your dependencies 这个错误的原因是.出现了不同版本的jar包(例如:V4包版本不 ...

  6. ListView属性及divider设置分割线

    给ListView设置分割线,只需设置如下两个属性: android:divider="#000" //设置分割线显示颜色 android:dividerHeight=" ...

  7. 关于Unity中如何代码动态修改天空盒

    在Unity中动态修改天空盒有两种方法: 一.为每个Texture建立天空盒材质球,需要更换时直接将对应材质球作为天空盒,缺点是建立的材质球太多 private void ChangeSkybox(M ...

  8. webpack----webpack4尝鲜

    安装v4.0.0-beta.0 yarn add webpack@next webpack-cli --dev 或者 npm install webpack@next webpack-cli --sa ...

  9. spring框架学习笔记4:SpringAOP实现原理

    AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...

  10. 福州大学软件1715|W班-助教卞倩虹个人简介

    各位好,我是卞倩虹 本科阶段的专业是网络工程,通过学校的学习我掌握了基础的网络组网配置技术,常常在机房配置路由器和交换机等相关设备.后来我接触了软件编程,在深入了解和学习后编程语言后,自主开发了一些项 ...