bootstrap的下拉多选框如何使用

bootstrap的下拉多选框如何使用

使用bootstrap-select组件时,先引用下列文件

最后一个文件 defaults-zh_CN.min.js 非必需,是组件中文化的时候才需要引用。

登录后复制

使用就更加简单了,不用任何已经js,直接使用class就可以初始化。

Select单选:

如果没有设置选中项,默认选中第一个option。如设置了tiltle属性,则显示title属性内容,不会默认选中。

    广东省    广西省    福建省    湖南省    山东省   

登录后复制

z.png

选项分组

                        广州市                深圳市                珠海市                                        南宁市                  柳州                  桂林市                                           烟台                   青岛                   济南                                       

登录后复制

x.png

默认样式,添加样式:data-style=”class名”

  ...  ...  ...  ...  ...

登录后复制

c.png

相关推荐:《bootstrap入门教程》

添加检索:data-live-search=”true”

....

登录后复制

v.png

Select多选:

添加“multiple ” 设置为多选,并且设置最多能选择2项 data-max-options=”2″

...

登录后复制

效果:b.png

添加检索:data-live-search=”true”

设置检索placeholder属性:data-live-search-placeholder=”搜索”

添加“全选/反选” 功能按钮 data-actions-box=”true”

      option1    option2    option3    option4        option1    option2    option3    option4        option1    option2    option3    option4  

登录后复制

效果:n.png

js初始化,设置选定的值

$('.selectpicker').selectpicker('val','mustard');$('.selectpicker').selectpicker('val',['mustard','relish']);

登录后复制

更新UI

$('.selectpicker').selectpicker('refresh');

登录后复制

选中事件

$('.selectpicker').on('changed.bs.select',function(e){});

登录后复制

以上就是bootstrap的下拉多选框如何使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3003084.html

(0)
上一篇 2025年3月13日 00:31:09
下一篇 2025年2月23日 06:46:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何利用bootstrap分页

    下载bootstrap然后解压到本地电脑目录,新建一个test目录用来存放测试文件。 新建一个测试的pagination.html文件。 nbsp;html> Bootstrap 分页测试   登录后复制«12345» 相关推荐:《b…

    2025年3月13日 编程技术
    200
  • bootstrap如何响应式布局

     bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。 在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。(推荐学习:Bootstrap视频教程) Boo…

    2025年3月13日
    200
  • 如何使用bootstrap实现年月日的时间选择

    下面介绍如何使用bootstrap实现年月日的时间选择。 使用bootstrap实现时间选择,页面需要加载以下文件:(推荐学习:Bootstrap视频教程) 1、CSS文件:bootstrap.min.css、bootstrap-datet…

    2025年3月13日
    200
  • bootstrap如何学习

    我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云。 还是在后面不断使用的过程中慢慢体会到它的价值。相信很多没有什么基础的初学者学…

    2025年3月13日
    200
  • bootstrap如何让图片居中显示

    我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中显示。 一般情况下,我们的图片都使用了.img-responsive 类来实现图片响应式。(推荐学习:Bootstrap视频教程) 如果需要实现响应式图片水平居中,那…

    2025年3月13日
    200
  • bootstrap插件有哪些

    bootstrap自带12 jquery插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 javascript 开发人员,您也可以着手学习 bootstrap 的 javascript 插件。 利用 Bootstrap 数据…

    2025年3月13日
    200
  • bootstrap有cdn吗

    cdn一词相信很多朋友都不会陌生,网上也经常会看到相关报道。之前各大cdn服务商响应总理的号召,cdn也都提速降费,像天下数据cdn,阿里云cdn都有不小的降价幅度。 CDN是什么 首先来看度娘的解释,CDN的全称:CONTENT DELI…

    2025年3月13日
    200
  • bootstrap框架是什么

    bootstrap框架是什么 Bootstrap框架是一款web框架,是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得…

    2025年3月13日
    200
  • bootstrap有必要学吗

    bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 Bootstrap是一个非常规范和完善的框架,你可以通过它学到很多技术和知识,如:规范格式和命名、字体图标构成等。建议你到Github上…

    2025年3月13日
    200
  • bootstrap什么时候出来的

    bootstrap什么时候出来的? bootstrap是在2011年8月19日将其作为开源项目发布的。 Bootstrap原名Twitter Blueprint,由Twitter的Mark Otto和Jacob Thornton编写,本意是…

    2025年3月13日
    200

发表回复

登录后才能评论