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 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 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/09/01 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP速成大法
2015/01/30 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python笔记之观察者模式
2019/11/20 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python中shell执行知识点
2020/05/06 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
股权转让意向书
2014/04/01 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
英语教学课后反思
2016/02/15 职场文书
公开致歉信
2019/06/24 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python