基于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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
js中对象与对象创建方法的各种方法
Feb 27 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
一道JS算法面试题——冒泡、选择排序
Apr 21 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
解析php5配置使用pdo
2013/07/03 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python分析作业提交情况
2017/11/22 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python学生管理系统开发
2019/01/30 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
理货员的岗位职责
2013/11/23 职场文书
水果超市创业计划书
2014/01/27 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书