为bootstrap-select添加值

Question

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

<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 class="chapters" data-size="7">
  <option>All Chapters</option>
</select>

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

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

但是，我得到的输出如下。

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

Answer 1

问题是val插件的bootstrap-select方法只能用于更改选择的值。因此，如果您在选择中有选项 Mustard ，则可以使用No 'Access-Control-Allow-Origin' header is present on the requested resource.选择它。

要为选择添加选项，您需要自己创建<option />元素并将其附加到<select />元素。要让插件知道某些内容发生了变化并且需要更新UI，您可以使用refresh方法。

我已经创建了一个小演示，向您展示如何做到这一点。以下代码可用于向选项添加选项，并确保刷新UI。它还允许将选项的value设置为文本值以外的值。您可能会或可能不会觉得有用，但我希望您能够深入了解如何使用jQuery修改元素。

$select.selectpicker('val', 'Mustard');

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

Answer 2

试一下

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

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

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