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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
js树形控件脚本代码
2008/07/24 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
Python实现二叉搜索树
2016/02/03 Python
Django框架多表查询实例分析
2018/07/04 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
详解用python写一个抽奖程序
2019/05/10 Python
python print出共轭复数的方法详解
2019/06/25 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
python中类与对象之间的关系详解
2020/12/16 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
消防安全标语
2014/06/07 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2014年保育员工作总结
2014/12/02 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers