引导程序-选择未选择的任何内容 [英] bootstrap-select nothing selected

问题描述

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

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

}

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

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

推荐答案

无论何时从选择器中添加或删除元素，您都需要:

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

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

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

When you need to add on the fly a new element the clearest and simplest way is to use 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.

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

In order to handle the selections you can use 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>

这篇关于引导程序-选择未选择的任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！