Bootstrap-select 未选中任何选项

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类“selectpicker”，一切都正常。

- Sanzeeb Aryal

---

你的代码中的 res 是什么？ - Reinder Wit

那个 JavaScript 是在哪里/何时被调用的？你可能需要在添加 <option> 元素之后启动 bootstrap-select。 - Reinder Wit

Answer 1

每当您向selectpicker中添加或删除元素时，需要执行以下操作：

.selectpicker('refresh')：要使用JavaScript编程方式更新select，请首先操纵select，然后使用refresh方法将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>

- gaetanoM

Answer 2

bootstrap-select插件将立即运行，但看起来您需要等待以便先加载自己的元素。因此，为了使其工作：

• 删除“selectpicker”类以不立即初始化插件 • 加载您的选项 • 按照 文档调用$('.yourcustomclassname').selectpicker('render');

在这里是一个工作的fiddle。

- Reinder Wit

Answer 3

这是我的解决方法： 使用JQuery，您只需添加一个选项，其中包含selected disabled hidden。 $('#cat').append('选择某些内容');

- Rrok Gjinaj