BootStrap selectpicker

mark 一下使用 bootstrap selectpicker 遇到的一个小issue，作为下次查错使用

$('.selectpicker').selectpicker('val', 'Mustard');//单选
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示

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文件中添加初始化方法：

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'请选择'});
}

在外部初始化的时候调用该方法就ok！

下图是美化后的：不是很好看，但是自己觉得比之前强多了！

但是这种美化插件有几个问题：

其实算不上几个，只是自己觉得这个问题很棘手，在用此方法美化之后，动态赋值的<select>将取法显示，我觉得应该是这样： bootstrap-select.js中把没有option的<select>显示'请输入'，这样的话动态赋值的option就写不进去了！如果能把noneSelectedText:'请选择' 进行修复，那么这个问题应该是可以解决的！

经过几个小时的研究，发现了问题所在，但是只是解决了其中的一个；

在js中调用的时候，一定要等也面上的select 中的option加载完成之后再调

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'请选择'});
}

这样就可以把动态的select赋值也能美化了，但是任然存在一个问题：不是页面上的每一个select都能在页面初始化的时候全部加载的，比如：现在有两个联动的select，也就是第二个select的option要随第一个变化，在js中添加监控onchange或者change；如果这样美化就有问题了！

以上所述是小编给大家介绍的BootStrap selectpicker的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap selectpicker后台动态绑定数据的方法

    本文为大家分享了BootStrap selectpicker后台动态绑定数据的方法,供大家参考,具体内容如下 html部分代码 <select class="selectpicker" multiple> </select> 这是一个下拉多选框,现在要动态往里添加下拉选项. js代码 <script type="text/javascript"> getOption(); function getOption(){ $.ajax(

  • BootStrap selectpicker后台动态绑定数据

    项目使用BootStrap设置select时,不能动态加载,使用以下方法可以解决. //获得全部订单信息(订单ID,订单名称) function GetAllOrders(obj) { $.ajax({ type: 'Get', url: '/OrderTypeSetting/GetAllCanUseOrderTypes/', dataType: "Json", success: function (data) { if (!data.flag) { $.each(data, func

  • BootStrap selectpicker

    BootStrap selectpicker

    mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用 $('.selectpicker').selectpicker('val', 'Mustard');//单选 $('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示 mark一下问题:设置的val必须为option里

  • bootstrap中selectpicker下拉框使用方法实例

    bootstrap中selectpicker下拉框使用方法实例

    前言 最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css     bootstrap-sele

  • BootStrap Select清除选中的状态恢复默认状态

    BootStrap Select清除选中的状态恢复默认状态

    PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件: 当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢? 如[图1] 当我们选择摸一个条件之后 如[图2] 此时点击重置按钮要将[图2]的状态回到[图1],我们会使用很多方法,比如: $("#loc_province_search").attr("lang",'0');//将下拉列表属性lang置为初始值 $("#loc_city_search&quo

  • bootstrap suggest搜索建议插件使用详解

    bootstrap suggest搜索建议插件使用详解

    近日因工作需要看了下此插件. 首先下载bootstrap js包.添加此插件的引用.注意css样式要引用,不能忘记. 前台页面代码,因为楼主做的是选项卡切换查询不同的结果. <tr> <th style="background: #fff;" width="30%">类型:</th> <td width="70%"> <select class="selectpicker show-

  • Bootstrap框架下下拉框select搜索功能

    Bootstrap框架下下拉框select搜索功能

    之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: <script type="text/javascript" src="<%=basePath%>/js/commons/jquery

  • Bootstrap select多选下拉框实现代码

    Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cl

  • Bootstrap select实现下拉框多选效果

    在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-

  • bootstrap 下拉多选框进行多选传值问题代码分析

    bootstrap 下拉多选框进行多选传值问题代码分析

    项目开发遇到个问题,就是引入bootstrap下拉多选框进行多选的时候,用form表单提交到后台,获取不到多选的值,只能获取的选择的第一个值. 纠结了会. jsp页面需要引入这东东~ <link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" > <script

随机推荐