bootstrap中如何使用下拉多选框-创新互联

bootstrap中如何使用下拉多选框,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联专注于网站建设|网站建设维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖高空作业车租赁等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身定制品质网站。

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

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

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

Select单选:

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

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

选项分组

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

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

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

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

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

....

Select多选:

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

...

效果:

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

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

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

          option2                                                  

效果:

js初始化,设置选定的值

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

更新UI

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

选中事件

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

看完上述内容,你们掌握bootstrap中如何使用下拉多选框的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页标题:bootstrap中如何使用下拉多选框-创新互联
转载来源:http://bzwzjz.com/article/eghih.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 自适应网站建设 盐亭网站设计 成都网站建设 网站制作 梓潼网站设计 成都网站设计 营销型网站建设 成都响应式网站建设 高端网站设计推广 成都品牌网站建设 重庆网站建设 成都网站设计 成都网站建设 响应式网站建设 网站设计公司 重庆企业网站建设 成都网站建设 成都网站设计 成都网站建设公司 成都商城网站建设 外贸网站建设 自适应网站设计