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字符串处理性能的代码
Dec 07 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JsDom 编程小结
2011/08/09 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
查看Django和flask版本的方法
2018/05/14 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
三年级科学教学反思
2014/01/29 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
供用电专业求职信
2014/07/07 职场文书
医生个人年度总结
2015/02/28 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android