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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
js实现3D照片墙效果
Oct 28 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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垃圾回收机制简单说明
2010/07/22 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
wxPython使用系统剪切板的方法
2015/06/16 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
pytorch 求网络模型参数实例
2019/12/30 Python
对python中各个response的使用说明
2020/03/28 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
维护民族团结演讲稿
2014/08/27 职场文书
捐款感谢信
2015/01/20 职场文书
护士医德考评自我评价
2015/03/03 职场文书
行政复议答复书
2015/07/01 职场文书
数学备课组工作总结
2015/08/12 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers