将值添加到 bootstrap-select

Question

我正在尝试使用 jQuery 向 bootstrap-select 添加值。我在头部部分添加了以下行，在 jQuery 和 Bootstrap 脚本和 CSS.

之后

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>`

我的 HTML select 代码如下：

<select class="chapters" data-size="7">
  <option>All Chapters</option>
</select>

我尝试使用以下代码向 select 添加更多值。

$('.chapters').selectpicker();
$('.chapters').selectpicker('val', 'Mustard');
$('.chapters').selectpicker('refresh');

但是，我得到如下输出。

我在 控制台 中没有收到任何错误。

Answer 1

试试这个

如果 chapters 是您的 ID，请尝试以下操作。

$('.chapters').val('Mustard');
$('.chapters').selectpicker('refresh');

您需要致电 'refresh' 要以编程方式将 select 更新为 JavaScript，首先操作 select，然后使用刷新方法更新 UI 以匹配新状态。当删除或添加选项时，或者当 disabling/enabling a select via JavaScript.

时，这是必需的

Answer 2

问题是 val method of the bootstrap-select 插件只能用于更改 select 的值。因此，假设您在 select 中有 Mustard 选项，则可以使用 $select.selectpicker('val', 'Mustard');.

selected

要向 select 添加选项，您需要创建一个 <option /> element yourself and append it to the <select /> element. To let the plugin know that something changed and the UI needs to be updated, you can use the refresh 方法。

我创建了一个小演示来向您展示如何做到这一点。下面的代码可用于向 select 添加选项，并确保刷新 UI。它还允许将选项的 value 设置为文本值以外的值。您可能会发现它有用，也可能不会，但我希望您能从中发现如何使用 jQuery.

修改元素

function addOption($select, text, value = null) {
  var $opt = $('<option />', {text: text});
  if (value === null) {
    value = text.toLowerCase().replace(/\s+/g, '-');
  }
  $opt.attr('value', value);
  $select.append($opt);
  $select.selectpicker('refresh');
}

var $chapterSelect = $('.chapters');
$chapterSelect.selectpicker();
addOption($chapterSelect, 'Mustard');
addOption($chapterSelect, 'Ketchup');
addOption($chapterSelect, 'Mayonnaise');
addOption($chapterSelect, 'French fries');
$chapterSelect.selectpicker('val', 'mustard');

<!-- styles -->
<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
     integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
     crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<!-- actual body -->
<select class="chapters" data-size="7">
  <option>All Chapters</option>
</select>

将值添加到 bootstrap-select

Add value to bootstrap-select

jquery

bootstrap-select