基于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 相关文章推荐
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
javascript相关事件的几个概念
May 21 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 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
PHP与已存在的Java应用程序集成
2006/10/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php变量范围介绍
2012/10/15 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
基于python实现聊天室程序
2018/07/27 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python conda操作方法
2019/09/11 Python
行政办公员自我评价分享
2013/12/14 职场文书
园林资料员岗位职责
2013/12/30 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
保护动物的标语
2014/06/11 职场文书
建筑安全生产责任书
2014/07/22 职场文书
整改落实自查报告
2014/11/05 职场文书
教师学习心得体会范文
2016/01/21 职场文书