Javascript bootstrap-select 添加项目并选择它

bootstrap-select add item and select it

提问by Chris Jones

I'm using Silvio Moreto's Bootstrap Select.

我正在使用 Silvio Moreto 的 Bootstrap Select。

On my page I have a button that opens a modal with an input box that allows you to add an item to the selectpicker. I would then like to automatically have that item selected but I can't get it to work.

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

The code I have is :

我的代码是：

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

But it just doesn't work. The item doesn't get selected.

但这不起作用。该项目没有被选中。

I have tried replacing the selection line with :

我尝试用以下内容替换选择行：

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

but that doesn't work either

但这也不起作用

Any ideas much appreciated (although the item DOES get added to the selectpicker).

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

回答by Daniel Trebbien

You have a typo. Instead of:

你有一个错字。代替：

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

You need:

你需要：

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

Here is a JSFiddle demo: http://jsfiddle.net/xbr5agqt/

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

The "Add and select 'Soy Sauce' option" button does the following:

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

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

One slightly faster approach (used by the "Add and select 'Relish' option" button) is to append the new <option> element with the selectedattribute already applied:

一种稍微快一点的方法（由“添加并选择‘重口味’选项”按钮使用）是在新的 <option> 元素中添加selected已经应用的属性：

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

回答by Nishal K.R

For adding optionsdynamically in bootstrap-selectpicker, appendthe optionto the selectand refreshthe selectpicker

用于添加options在动态bootstrap-selectpicker，append在option向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/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

For better, add the selectedattribute in the append option

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

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