bootstrap-select 没有 selected

Question

我正在使用 bootstrap select.

<select name="categories[]" id="cat" class="selectpicker" multiple>
</select>

并从这里获取选项标签，

var result='';
for(var i=0;  i<res.getcategories.length;  i++) 
{                    
  result += '<option value='+res.getcategories[i].cat_id+'>'+res.getcategories[i].category+'</option>';                 
   $('#cat').html(result); 

}

但是它总是显示 Nothing selected 并且我不显示其他选项。如果我不使用 bootstap class 'selectpicker' 一切都很好。

Answer 1

bootstrap-select 插件会立即运行，但看起来您需要等待，以便您可以先加载自己的 <option> 元素。

所以为了让这个工作：

删除 'selectpicker' class 以不立即初始化插件
加载您的选项
根据 documentation

$('.yourcustomclassname').selectpicker('render');

这是一个working fiddle

Answer 2

每当您从选择器中添加或删除元素时，您需要：

.selectpicker('refresh'): To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

这意味着你必须执行：

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

当您需要动态添加新元素时，最清晰、最简单的方法是使用 jQuery:

$('#cat').append($('<option>', {
    value: res.getcategories[i].cat_id,
    text: res.getcategories[i].category
}));

通过这种方式，您可以避免 < 和 > 或 " 和 ' 符号以及诸如此类的问题。

为了处理选择，您可以使用 changed.bs.select。

所以，关于如何添加文档准备好以及每当您单击添加按钮以及相应的删除和选择实现的示例是：

var res = {
  getcategories: [{cat_id: 'Cat Id 1', category: 'Category 1'},
                  {cat_id: 'Cat Id 2', category: 'Category 2'}, {cat_id: 'Cat Id 3', category: 'Category 3'},
                  {cat_id: 'Cat Id 4', category: 'Category 4'}, {cat_id: 'Cat Id 5', category: 'Category 5'}]
};

$(function () {
  $('#add').on('click', function (e) {
    for (var i = 0; i < res.getcategories.length; i++) {
      $('#cat').append($('<option>', {
        value: res.getcategories[i].cat_id,
        text: res.getcategories[i].category
      }));
    }
    $('#cat').selectpicker('refresh');
  }).trigger('click');  // this line to load on selectpicker on document ready

  $('#remove').on('click', function (e) {
    $('#cat option').remove();
    $('#cat').selectpicker('refresh')
  });
  
    $('#cat').on('changed.bs.select', function(e) {
      console.log('Selected elements: ' + ($('#cat').val() || ['Nothing selected']).join(', '));
    })
});

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>


<div class="container">
    <h1>Selectpicker</h1>

    <div class="row">
        <div class="col-xs-12">
            <select name="categories[]" id="cat" class="selectpicker" multiple>
            </select>
        </div>
    </div>
</div>
<div class="container-fluid">
    <h1></h1>

    <div class="row">
        <div class="col-xs-4">
            <button id="add" type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span>
                Add Options
            </button>
        </div>
        <div class="col-xs-8">
            <button id="remove" type="button" class="btn btn-default btn-lg"><span
                    class="glyphicon glyphicon-remove"></span> Remove Options
            </button>
        </div>
    </div>
</div>

Answer 3

这是我的解决方法： JQuery 你只需要添加一个选项，选择禁用隐藏。

$('#cat').append('Select Something');

bootstrap-select 没有 selected

bootstrap-select nothing selected

jquery

twitter-bootstrap

bootstrap-select