Bootstrap-select добавить элемент и выбрать его

Я использую Silstio Moreto Bootstrap Select.

На моей странице у меня есть кнопка, которая открывает модальную форму с полем ввода, позволяющим добавить элемент к элементу selectpicker. Затем я хотел бы автоматически выбрать этот элемент, но я не могу заставить его работать.

Код, который у меня есть:

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

Но это просто не работает. Элемент не выбран.

Я попытался заменить строку выбора на:

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

но это не работает.

Любые идеи, которые были высоко оценены (хотя элемент добавляется в selectpicker).

Ответы

Ответ 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");

Один слегка более быстрый подход (используемый кнопкой "Добавить и выберите" Повторить "), чтобы добавить новую <option> элемент с уже примененным атрибутом selected:

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

Ответ 2

Для динамического добавления 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" />
<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="#" onclick="location.href='https://cdn.jsdelivr.net/npm/