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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
vue实现五子棋游戏
May 28 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
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
15种PHP Encoder的比较
2007/03/06 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python怎么提高计算速度
2020/06/11 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
业务部门经理岗位职责
2014/02/23 职场文书
青春寄语大全
2014/04/09 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
党员志愿者活动方案
2014/08/28 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
夏洛特的网观后感
2015/06/15 职场文书
小学生教师节广播稿
2015/08/19 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python