基于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实现下载远程文件并保存在本地的脚本
May 06 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
php封装的验证码类分享
2017/02/26 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Three.js快速入门教程
2016/09/09 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Python探索之pLSA实现代码
2017/10/25 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python高级用法总结
2018/05/26 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
期中考试反思800字
2014/05/01 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
旷课检讨书500字
2014/10/14 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
给领导的感谢信范文
2015/01/23 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
2015年安全月活动总结
2015/03/26 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
Spring 使用注解开发
2022/05/20 Java/Android