C# 基于Bootstrap的三级联动
实现效果如图:
一、声明市、县、乡对应的下拉控件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的三级联动的更多相关文章
- 基于JQ的三级联动菜单选择
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- 基于Jquery实现省份、城市、区县三级联动
前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- Ajax来实现下拉框省市区三级联动效果(服务端基于express)
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
- 基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
- 基于thinkphp和ajax的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- android:省市县三级联动(基于json和spring)
一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
随机推荐
- PAT乙级-1047. 编程团体赛(20)
编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...
- opencv3.4+vs2015+win10安装过程问题解决
在使用cmake configure生成vs的工程文件时,有几个第三方的库和文件会频繁下载不成功,分别是: ffmpeg_version.cmake opencv_ffmpeg.dll opencv_ ...
- Win7硬盘的AHCI模式
1.什么是硬盘的AHCI模式? AHCI是串行ATA高级主控接口的英文缩写,它是Intel所主导的一项技术,它允许存储驱动程序启用高级SATA功能,如本机命令队列(NCQ)和热插拔.开启AHCI之后可 ...
- 关于html文档的规范
1. <!DOCTYPE html> 告诉浏览器该文档使用哪种html或xhtml的规范 2. 元数据中的X-UA-Compatible <meta http-equiv=" ...
- 在oracle中,group by后将字符拼接,以及自定义排序
1.在oracle中,group by后将字符拼接.任务:在学生表中,有studentid和subject两个字段.要求对studentid进行group by分组,并将所选科目拼接在一起.oracl ...
- Mycat 分片规则详解--枚举分片
实现方式:切分规则根据文件(partition-hash-int.txt)配置的可能的枚举来进行分片,此种分片规则理解为枚举分区,会比较适合于取值固定的场合,比如说省份(固定值) 优点:适用于按照省份 ...
- POJ1331 Multiply(strtol函数练习)
题目链接:http://poj.org/problem?id=1331 主要介绍strtol函数: long int strtol(const char *nptr,char **endptr,int ...
- Redis TTL命令
Redis TTL 命令以秒为单位返回 key 的剩余过期时间. redis TTL 命令基本语法如下: redis 127.0.0.1:6379> TTL KEY_NAME 当 key 不存在 ...
- elementUI源码修改定制
1.修改elementUI源码 首先从Git上克隆代码或者下载代码包 进入文件夹打开终端或Git Bash Here,运行npm install 安装依赖包.npm run dev 打开网页http: ...
- c++ --> union介绍
union介绍 共用体,也叫联合体,在一个“联合”内可以定义多种不同的数据类型, 一个被说明为该“联合”类型的变量中,允许装入该“联合”所定义的任何一种数据,这些数据共享同一段内存,以达到节省空间的目 ...