BootStrap智能表单实战系列(十一)级联下拉的支持

 更新时间:2016年06月13日 15:45:31   作者:程序有Bug  
这篇文章主要介绍了BootStrap智能表单实战系列(十一)级联下拉的支持 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

什么是 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 CSS组件之大屏幕展播

    Bootstrap CSS组件之大屏幕展播

    这篇文章主要介为大家详细绍了Bootstrap CSS组件之大屏幕展播的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript使用AutoDecimal解决运算精度问题

    JavaScript使用AutoDecimal解决运算精度问题

    这篇文章主要介绍了 JavaScript 运算中的精度问题及解决方案 AutoDecimal,指出 JavaScript 处理浮点数运算常出现精度问题,现有解决方案存在不足,为了解决这一问题,AutoDecimal 应运而生,本文给大家介绍了JavaScript使用AutoDecimal解决运算精度问题
    2024-12-12
  • iis6+javascript Add an Extension File

    iis6+javascript Add an Extension File

    iis6+javascript Add an Extension File...
    2007-06-06
  • three.js修改物体的位置代码实例

    three.js修改物体的位置代码实例

    在Three.js中物体通常是通过创建"网格"(Mesh)对象来描述的,下面这篇文章主要给大家介绍了关于three.js修改物体位置的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • js操作table中tr的顺序实现上移下移一行的效果

    js操作table中tr的顺序实现上移下移一行的效果

    这篇文章主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • JavaScript中Number对象的toFixed() 方法详解

    JavaScript中Number对象的toFixed() 方法详解

    下面小编就为大家带来一篇JavaScript中Number对象的toFixed() 方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript类数组对象转换为数组对象的方法实例分析

    JavaScript类数组对象转换为数组对象的方法实例分析

    这篇文章主要介绍了JavaScript类数组对象转换为数组对象的方法,结合实例形式分析了javascript类数组对象的功能,以及类数组对象转换为数组对象的相关方法与实现技巧,需要的朋友可以参考下
    2018-07-07
  • 一些常用弹出窗口/拖放/异步文件上传等实用代码

    一些常用弹出窗口/拖放/异步文件上传等实用代码

    今天写一点工作中遇到的东西【弹出窗口】【拖放】【异步文件上传】,大家共同学习,共同进步
    2013-01-01
  • javascript简单比较日期大小的方法

    javascript简单比较日期大小的方法

    这篇文章主要介绍了javascript简单比较日期大小的方法,涉及JavaScript针对日期的转换与判定操作技巧,需要的朋友可以参考下
    2016-01-01
  • 学习javascript的闭包,原型,和匿名函数之旅

    学习javascript的闭包,原型,和匿名函数之旅

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性,本文给大家介绍js的闭包,原型,和匿名函数之旅,感兴趣的朋友一起学习吧
    2015-10-10

最新评论