bootstrap-select 添加项目并选择它答案

【问题标题】：bootstrap-select add item and select itbootstrap-select 添加项目并选择它
【发布时间】：2016-01-16 09:36:03
【问题描述】：

我正在使用 Silvio Moreto 的 Bootstrap Select。

在我的页面上，我有一个按钮，可以打开一个带有输入框的模式，允许您将项目添加到选择器。然后我想自动选择该项目，但我无法让它工作。

我的代码是：

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');
$('#myselect').val(newitemnum);
$('#myselect').selectpicker('refresh');

但这只是行不通。该项目没有被选中。

我尝试将选择行替换为：

$('#myselect').selectpicker('val',newitemnum);

但这也不起作用

非常感谢任何想法（尽管该项目确实已添加到选择器中）。

【问题讨论】：

根据library docs，您的第二个代码 sn-p 应该会产生预期的结果。运行该语句后是否在控制台中显示任何错误消息？
什么都没有，它将值添加到 selectpicker 但只是不选择它 - 它默认为“Nothing Selected”
如果上述所有解决方案都不起作用，请仔细检查您的选择器是否有效，例如：console.log($('#myselect'));如果没有，您的选择 ID 可能有问题。

标签： javascript jquery twitter-bootstrap bootstrap-select

【解决方案1】：

你有一个错字。而不是：

$('#myselect').append('<option val="'+newitemnum+'">'+newitemdesc+'</option>');

你需要：

$('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');

这是一个 JSFiddle 演示：http://jsfiddle.net/xbr5agqt/

“添加并选择‘酱油’选项”按钮执行以下操作：

$("#myselect").append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
$("#myselect").val(4);
$("#myselect").selectpicker("refresh");

一种稍微快一点的方法（由“添加并选择'Relish'选项”按钮使用）是附加新的

$("#myselect").append('<option value="'+newitemnum+'" selected="">'+newitemdesc+'</option>');
$("#myselect").selectpicker("refresh");

【讨论】：

太棒了！就是这样！捂脸！真的，令人惊讶的是，其他人如何在查看您的代码时发现您一直在寻找的一些明显的东西（val 而不是 value），几个小时。非常感谢 :)
它是否在可搜索的 selctpiker 中工作？

【解决方案2】：

用于在bootstrap-selectpicker、append 和option 中动态添加options 到select 和refresh selectpicker

$(document).on('click','#addOptions',function(){
  var newitemnum = Math.floor(Math.random() * 100) + 1;
  var newitemdesc = "Item "+ newitemnum;
  
  // Append the option to select
  $('#myselect').append('<option value="'+newitemnum+'">'+newitemdesc+'</option>');
  
  // Set the select value with new option
  $("#myselect").val(newitemnum);
  
  // Refresh the selectpicker
  $("#myselect").selectpicker("refresh");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select name="myselect[]" class="selectpicker" id="myselect">
  <option value="A1">Anatomy</option>
  <option value="A2">Anesthesia</option>
  <option value="A3">Biochemistry</option>
  <option value="A4">Community Medicine</option>
  <option value="A5">Dermatology</option>
  <option value="A6">ENT</option>
</select>

<button id="addOptions" class="btn btn-success">Add</button>

为了更好，在附加选项中添加selected 属性

// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');

【讨论】：

【解决方案3】：

它正在使用可搜索和多选的 selectpiker：

 <select id="mySelect" class="selectpicker show-menu-arrow" multiple data-live-search="true" title="Persons"
            data-selected-text-format="static" data-actions-box="true">
 </select>


<script>
        $(document).ready(function () {
            for (let i = 0; i < 20; i++) 
                $("#mySelect").append(
                    `<option value="${i}">person ${i}</option>`
                );
            
            $("#mySelect").selectpicker("refresh");
            $('.bs-select-all').html("All");
            $('.bs-deselect-all').html("Nothing");
        });
    </script>

【讨论】：