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 相关文章推荐
popdiv
Jul 14 Javascript
javascript string字符串优化问题
Jul 31 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
el-form 多层级表单的实现示例
Sep 10 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
pandas通过索引进行排序的示例
2018/11/16 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
详解python datetime模块
2020/08/17 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
先进个人材料怎么写
2014/12/30 职场文书
小学同学聚会感言
2015/07/30 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书