基于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拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php 数组元素快速去重
2017/05/05 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
JavaScript中的类继承
2010/11/25 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
React组件refs的使用详解
2018/02/09 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
python创建和使用字典实例详解
2013/11/01 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python 装饰器的使用示例
2020/10/10 Python
python 简单的调用有道翻译
2020/11/25 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
采购员的工作职责
2013/12/26 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
三爱活动实施方案
2014/03/19 职场文书
合作经营协议书
2014/04/17 职场文书
小学运动会班级口号
2014/06/09 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
JavaScript流程控制(循环)
2021/12/06 Javascript
使用python求解迷宫问题的三种实现方法
2022/03/17 Python