BootStrap智能表单实战系列(十一)级联下拉的支持


Posted in Javascript onJune 13, 2016

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Bootstrap 包的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

在项目中我们经常可以见到像省市县选择,其实实现方法有很多种,下面小编给大家介绍bootstrap 智能表单之bootstrap级联下拉的支持,具体介绍如下所示:

1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推

2.也有将所有的项都加载到select中,然后通过关联来显示或隐藏与上一级别无关的项

感觉还是第二种简单一些,于是使用了第二种方式来实现的,其余的就不废话了

代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade.html):

本地运行截图:

BootStrap智能表单实战系列(十一)级联下拉的支持

以上所述是小编给大家介绍的BootStrap智能表单实战系列(十一)级联下拉的支持的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 #Javascript
浅谈JavaScript对象的创建方式
Jun 13 #Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 #Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 #Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
解析php常用image图像函数集
2013/06/24 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
使javascript也能包含文件
2006/10/26 Javascript
js验证表单第二部分
2006/11/25 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python之os操作方法(详解)
2017/06/15 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python中按值来获取指定的键
2019/03/04 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
优秀党员申报材料
2014/12/18 职场文书
教师外出学习心得体会
2016/01/18 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Python预测分词的实现
2021/06/18 Python