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

Я использую Bootstrap Select Сильвио Морето.

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

Код у меня есть:

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

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

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

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

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

Любые идеи высоко ценятся (хотя элемент ДЕЙСТВИТЕЛЬНО добавляется в selectpicker).


javascript jquery twitter-bootstrap bootstrap-select
person Chris Jones    schedule 17.10.2015    source источник
comment
Согласно документам библиотеки, ваш второй фрагмент кода должен дать ожидаемые результаты. Показывает ли он какие-либо сообщения об ошибках в консоли после запуска этого оператора?   -  person Ryan    schedule 17.10.2015
comment
вообще ничего, он добавляет значение в selectpicker, но просто не выбирает его - по умолчанию он равен Nothing Selected   -  person Chris Jones    schedule 17.10.2015
comment
Если все приведенные выше решения не работают, дважды проверьте правильность вашего селектора, например: console.log($('#myselect')); Если нет, у вас могут быть проблемы с выбранным идентификатором.   -  person Towelie    schedule 05.03.2020

Ответы (3)


arrow_upward
57
arrow_downward

У вас опечатка. Вместо:

$('#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");
person Daniel Trebbien    schedule 17.10.2015
comment
Потрясающий! Вот оно! Фейспалм! Серьезно, удивительно, как кто-то еще, глядя на ваш код, может обнаружить что-то очевидное (val вместо значения), которое вы искали часами. Большое спасибо :) - person Chris Jones; 18.10.2015
comment
он работает в селктпикере с возможностью поиска? - person ankit suthar; 24.06.2017

arrow_upward
1
arrow_downward

Для динамического добавления 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>

Для лучшего добавьте атрибут selected в опцию добавления

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

arrow_upward
0
arrow_downward

Он работает над 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>
person Hicham O-Sfh    schedule 01.12.2020