基于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中字符串的定义示例代码
Dec 19 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
Javascript实现字数统计
Jul 03 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
JavaScript数组push方法使用注意事项
Oct 30 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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新手上路(十二)
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
php检测useragent版本示例
2014/03/24 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
jQuery中html()方法用法实例
2014/12/25 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
Python开发编码规范
2006/09/08 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
flask入门之表单的实现
2018/07/18 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
如何通过Python实现标签云算法
2019/07/02 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
详解Django中异步任务之django-celery
2020/11/05 Python
python实现视频压缩功能
2020/12/18 Python
行政助理工作职责范本
2014/03/04 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
机关保密承诺书
2014/06/03 职场文书
小学课外活动总结
2014/07/09 职场文书
委托书格式
2014/08/01 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
python元组打包和解包过程详解
2021/08/02 Python