bootstrap-select 插件如果没有选中任何选项,会显示 Nothing selected 的解决办法

本文介绍了解决Bootstrap-select插件在没有选项被选中时显示'Nothing selected'的方法。提供了两种方案:一是通过添加属性data-none-selected-text或title;二是通过JS设置noneSelectedText属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自己开发项目中用到这个插件遇到的问题,bootstrap-select插件如果没有选中任何选项,会显示Nothing selected的解决办法有两种:

第一种: 1. 如果没有默认提示的效果,就在select上添加属性 data-none-selected-text,什么也不显示。

               2. 如果有默认提示的效果,比如:‘请选择’,就在select上添加属性 title="请选择" 。

第二种: 1. 如果没有默认提示的效果,js:

                $(function() {
                $(".selectpicker").selectpicker({
                noneSelectedText: '  ' //默认显示内容  
                 });
                });

                1. 如果有默认提示的效果,js:

                 $(function() {
                $(".selectpicker").selectpicker({
                noneSelectedText: '请选择' //默认显示内容  
                 });

                });


注意:添加属性 title="请选择"  和 js设置noneSelectedText: '请选择' 的区别:

添加属性 title="请选择":


 js设置noneSelectedText: '请选择':  (这个必须在多选的情况下)


<div class="container" id="content"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-5 col-lg-6 hidden-xs hidden-sm"> <h1 class="txt-color-red login-header-big">VisionTool MES 生产制造系统</h1> <div class="hero"> <img class="pull-right display-image" style="width: 380px;" alt="" src="/staticResource/vendor/img/demo/loading.jpg"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4"> <div class="well no-padding"> <form class="smart-form client-form" id="login-form" action="index.html"> <header>系统登录认证</header> <fieldset> <section> <label class="label username">用户名</label> <label class="input"> <i class="icon-append fa fa-user"></i> <input name="username" id="username" type="username" placeholder="用户名"> <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i>请输入用户名</b></label> </section> <section> <label class="label">密码</label> <label class="input"> <i class="icon-append fa fa-lock"></i> <input name="password" id="password" type="password" placeholder="密码"> <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> 请输入密码</b> </label> </section> <section> <label class="label">班次</label> <div class="dropdown bootstrap-select bs3"><select name="shiftClass" tabindex="-98" class="selectpicker" id="shiftClass"></select><button title="Nothing selected" class="btn dropdown-toggle btn-default bs-placeholder" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="bs-select-1" type="button" data-toggle="dropdown" data-id="shiftClass"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div> </div><span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><div tabindex="-1" class="inner open" id="bs-select-1" role="listbox"><ul class="dropdown-menu inner " role="presentation"></ul></div></div></div> </section> <div class="note"> <a onclick="alert('请联系信息管理部:') ">忘记密码了?</a> </div> </fieldset> <footer> <button class="btn btn-primary" id="btnlogin" type="button">登录</button> </footer> </form> </div> </div> </div> </div> 这里面是否包含CSRF令牌信息
最新发布
06-25
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值