bootstrap-select 未选择任何内容答案

【问题标题】：bootstrap-select nothing selectedbootstrap-select 未选择任何内容
【发布时间】：2016-12-10 15:15:01
【问题描述】：

我正在使用引导选择。

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

}

但它总是显示未选择任何内容，并且我不显示其他选项。如果我不使用引导类 'selectpicker' 一切都很好。

【问题讨论】：

您的代码中的res 是什么？
那个 javascript 是在哪里/什么时候调用的？添加 <option> 元素后，您可能必须启动引导选择

标签： jquery twitter-bootstrap bootstrap-select

【解决方案1】：

bootstrap-select 插件将立即运行，但您似乎需要等待它才能先加载自己的 <option> 元素。

所以为了让这个工作：

删除 'selectpicker' 类以不立即初始化插件
加载您的选项
按照documentation拨打$('.yourcustomclassname').selectpicker('render');

这是working fiddle

【讨论】：

【解决方案2】：

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

.selectpicker('refresh')：要使用 JavaScript 以编程方式更新选择，首先操作选择，然后使用刷新方法更新 UI 以匹配新状态。在删除或添加选项时，或者通过 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>

【讨论】：

【解决方案3】：

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

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

【讨论】：