基于Bootstrap实现城市三级联动


Posted in Javascript onNovember 23, 2017

本文实例为大家分享了Bootstrap实现城市三级联动的具体代码,供大家参考,具体内容如下

HTML代码部分

<div class="form-group">
  <div class="col-sm-2 text-center">
   省
  </div>
  <div class="col-sm-2">
   <select class="form-control" name="Province" id="Province">
   <option>==请选择===</option>
   </select>


  </div>
  <div class="col-sm-1 text-center">
   市
  </div>
  <div class="col-sm-2">
   <select class="form-control" name="City" id="City">
   <option>==请选择===</option>
   </select>
  </div>
  <div class="col-sm-1 text-center">
  县/区
  </div>
  <div class="col-sm-2">
   <select class="form-control" name="Village" id="Village">
   <option>==请选择===</option>
   </select>
  </div>
  </div>

JS 代码部分

$(function () {


 //默认绑定省
 ProviceBind();
 //绑定事件
 $("#Province").change( function () {
 CityBind();
 })
 
 $("#City").change(function () {
 VillageBind();
 })
 
 


})
function Bind(str) {
 alert($("#Province").html());
 $("#Province").val(str);


}
function ProviceBind() {
 //清空下拉数据
 $("#Province").html("");



 var str = "<option>==请选择===</option>";
 $.ajax({
 type: "POST",
 url: "/Home/GetAddress",
 data: { "parentiD": "", "MyColums": "Province" },
 dataType: "JSON",
 async: false,
 success: function (data) {
  //从服务器获取数据进行绑定
  $.each(data.Data, function (i, item) {
  str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
  })
  //将数据添加到省份这个下拉框里面
  $("#Province").append(str);
 },
 error: function () { alert("Error"); }
 });


 
 
}
function CityBind() {


 var provice = $("#Province").attr("value");
 //判断省份这个下拉框选中的值是否为空
 if (provice == "") {
 return;
 }
 $("#City").html("");
 var str = "<option>==请选择===</option>";


 $.ajax({
 type: "POST",
 url: "/Home/GetAddress",
 data: { "parentiD": provice, "MyColums": "City" },
 dataType: "JSON",
 async: false,
 success: function (data) {
  //从服务器获取数据进行绑定
  $.each(data.Data, function (i, item) {
  str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
  })
  //将数据添加到省份这个下拉框里面
  $("#City").append(str);
 },
 error: function () { alert("Error"); }
 });


}
function VillageBind() {


 var provice = $("#City").attr("value");
 //判断市这个下拉框选中的值是否为空
 if (provice == "") {
 return;
 }
 $("#Village").html("");
 var str = "<option>==请选择===</option>";
 //将市的ID拿到数据库进行查询,查询出他的下级进行绑定
 $.ajax({
 type: "POST",
 url: "/Home/GetAddress",
 data: { "parentiD": provice, "MyColums": "Village" },
 dataType: "JSON",
 async: false,
 success: function (data) {
  //从服务器获取数据进行绑定
  $.each(data.Data, function (i, item) {
  str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
  })
  //将数据添加到省份这个下拉框里面
  $("#Village").append(str);
 },
 error: function () { alert("Error"); }
 });
 //$.post("/Home/GetAddress", { parentiD: provice, MyColums: "Village" }, function (data) { 
 // $.each(data.Data, function (i, item) {
 // str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
 // })
 // $("#Village").append(str);
 //})
}

控制器+数据库 代码部分

public ActionResult GetAddress(string parentiD, string MyColums)
 {
  ISysFieldBll sysfileBll = BLLFactory.DataAccess.GetBll<ISysFieldBll>();
  Result result = new Result();
  result.Data = sysfileBll.GetSysFieldParentId(parentiD,MyColums);
  return Json(result,JsonRequestBehavior.AllowGet);
 }

表代码 

CREATE TABLE [dbo].[SysField](
[Id] [nvarchar](36) NOT NULL,
[MyTexts] [nvarchar](200) NOT NULL,
[ParentId] [nvarchar](36) NULL,
[MyTables] [nvarchar](200) NULL,
[MyColums] [nvarchar](200) NULL,
[Sort] [int] NULL,
[Remark] [nvarchar](4000) NULL,
[CreateTime] [datetime] NULL,
[CreatePerson] [nvarchar](200) NULL,
[UpdateTime] [datetime] NULL,
[UpdatePerson] [nvarchar](200) NULL,
)

SQL查询代码  

string sql = @"SELECT * FROM SysField WHERE 1=1 and MyTables='SysPerson'and MyColums=@MyColums and ParentId=@ParentId ";

最重要的也就是数据

这是省市县的表格数据,直接导入到数据库过后就能使用        

这是下载地址:三级联动

最终的效果图:

基于Bootstrap实现城市三级联动

最重要的也就是数据。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
sublime text配置node.js调试(图文教程)
Nov 23 #Javascript
Vue代码分割懒加载的实现方法
Nov 23 #Javascript
初探js和简单隐藏效果的实例
Nov 23 #Javascript
详解如何在angular2中获取节点
Nov 23 #Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
php相当简单的分页类
2008/10/02 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php实现Session存储到Redis
2015/11/11 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
微信小程序签到功能
2018/10/31 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python 实用工具状态机transitions
2020/11/21 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
情人节活动策划方案
2014/02/27 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
社区科普工作方案
2014/06/03 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
大学生实训报告总结
2014/11/05 职场文书
实施意见格式范本
2015/06/05 职场文书