基于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入门基础 document.write输出
Feb 22 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
js实现简单选项卡功能
Mar 23 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
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
第十二节--类的自动加载
2006/11/16 PHP
深入PHP数据加密详解
2013/06/18 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
django 模型字段设置默认值代码
2020/07/15 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
商务日语专业毕业生自荐信
2014/03/27 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
小学生演讲稿大全
2014/04/25 职场文书
倡议书格式模板
2014/05/13 职场文书
个人债务授权委托书
2014/10/17 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
Golang 切片(Slice)实现增删改查
2022/04/22 Golang