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); 

}

然而，它总是显示没有选择，我不显示其他选项。如果我不使用bootstap类＆＃39; selectpicker＆＃39;一切都很好。

Answer 1

每当您在selectpicker中添加或删除元素时，您需要：

.selectpicker('refresh')：要以编程方式使用JavaScript更新选择，请先操作select，然后使用refresh方法更新UI以匹配新状态。在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

这意味着您必须执行：

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

当您需要动态添加新元素时，最简单，最简单的方法就是使用 jQuery：

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

这样可以避免＆lt;和＆gt;或“和'符号等等。

为了处理选择，您可以使用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 2

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

所以为了让这个工作：

删除＆＃39; selectpicker＆＃39;类不要立即初始化插件
加载您的选项
根据documentation

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

这里是working fiddle

Answer 3

这是我的解决方法：使用JQuery，您只需添加一个选项，其中选定的禁用项被隐藏。

$（'＃cat'）。append（'Select Something'）;

bootstrap-select nothing selected selected

3 个答案: