twitter-bootstrap 引导程序选择什么都不选

bootstrap-select nothing selected

提问by Sanzeeb Aryal

I am using bootstrap select.

我正在使用引导程序选择。

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

and getting the option tag from here,

并从这里获取选项标签，

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

}

However it always displays Nothing selected and i donot display other options. If i donot use bootstap class 'selectpicker' everything is fine.

但是它总是显示没有选择，我不显示其他选项。如果我不使用 bootstap 类“selectpicker”，一切都很好。

回答by gaetanoM

Whenever you add or remove elements from a selectpicker you need:

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

.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.

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

This means you have to execute:

这意味着您必须执行：

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

When you need to add on the fly a new element the clearest and simplest way is to use jQuery:

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

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

In this way you avoid problems with < and > or " and ' symbols and whatnot.

通过这种方式，您可以避免 < 和 > 或 " 和 ' 符号等问题。

In order to handle the selections you can use changed.bs.select.

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

So, an example on how to add on document ready and whenever you click the add button and the corresponding implementation of remove and selection is:

因此，有关如何添加文档准备就绪以及何时单击添加按钮以及相应的删除和选择实现的示例是：

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>

回答by Reinder Wit

The bootstrap-select plugin will run immediately, but it looks like you need it to wait so that you can load your own <option>elements first.

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

So in order to get this working:

所以为了让这个工作：

• remove the 'selectpicker' class to not initialize the plugin straight away
• load your options
• call $('.yourcustomclassname').selectpicker('render');as per the documentation

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

Here's a working fiddle

这是一个工作小提琴

回答by Rrok Gjinaj

This is my workaround: with JQuery you just have to add an option with selected disabled hidden.

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

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

$('#cat').append('选择东西');