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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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
程序员编程十条戒律
2009/07/09 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
YII框架常用技巧总结
2019/04/27 PHP
JQuery 常用操作代码
2010/03/14 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Django添加feeds功能的示例
2018/08/07 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
中国电视购物:快乐购
2017/02/04 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
关于VPN
2012/06/10 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
音乐会主持人开场白
2015/05/28 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang