网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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://bjjierui.cn/article/eghih.html

其他资讯