时间:2021-05-28
mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用
mark一下问题:设置的val必须为option里面的value值,如果用name怎不生效。
PS:select 美化(bootstrap)
需要引入的文件:
bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js
以及bootstrap.min.js等几个常用的bootstarp文件
实现:
1、 在<select>标签中添加class或者id,建议添加class,因为class可以重复;
2、 在js文件中添加初始化方法:
在外部初始化的时候调用该方法就ok!
下图是美化后的:不是很好看,但是自己觉得比之前强多了!
但是这种美化插件有几个问题:
其实算不上几个,只是自己觉得这个问题很棘手,在用此方法美化之后,动态赋值的<select>将取法显示,我觉得应该是这样: bootstrap-select.js中把没有option的<select>显示'请输入',这样的话动态赋值的option就写不进去了!如果能把noneSelectedText:'请选择' 进行修复,那么这个问题应该是可以解决的!
经过几个小时的研究,发现了问题所在,但是只是解决了其中的一个;
在js中调用的时候,一定要等也面上的select 中的option加载完成之后再调
这样就可以把动态的select赋值也能美化了,但是任然存在一个问题:不是页面上的每一个select都能在页面初始化的时候全部加载的,比如:现在有两个联动的select,也就是第二个select的option要随第一个变化,在js中添加监控onchange或者change;如果这样美化就有问题了!
以上所述是小编给大家介绍的BootStrap selectpicker的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
项目使用BootStrap设置select时,不能动态加载,使用以下方法可以解决。//获得全部订单信息(订单ID,订单名称)functionGetAllOrde
本文为大家分享了BootStrapselectpicker后台动态绑定数据的方法,供大家参考,具体内容如下html部分代码这是一个下拉多选框,现在要动态往里添加
本文算是bootstrap学习使用的年底大总结,供大家参考,具体内容如下bootstrap框架BootStrap学习从现在开始,前端开发框架Bootstrap,
源码解读Bootstrap下拉菜单基本用法在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Boo
npm安装ng-bootstrap模块npminstall@ng-bootstrap/ng-bootstrap--save在Angular项目配置app.mod