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 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
Angular中支持SCSS的方法
Nov 18 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
小程序表单认证布局及验证详解
Jun 19 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php共享内存段示例分享
2014/01/20 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python交易记录整合交易类详解
2019/07/03 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
打架检讨书800字
2014/01/10 职场文书
银行批评与自我批评
2014/02/10 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
品牌推广策划方案
2014/05/28 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS