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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
js实现坦克大战游戏
Feb 24 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
php数字转汉字代码(算法)
2011/10/08 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python使用python-docx读写word文档
2019/08/26 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
毕业生大学生活自我总结
2014/01/31 职场文书
人事助理自荐信
2014/02/02 职场文书
教师自我反思材料
2014/02/14 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015学校年度工作总结
2015/05/11 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python