bootstrap-select add item and select it

Question

I'm using Silvio Moreto's 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).

According to the [library docs](https://silviomoreto.github.io/bootstrap-select/), your 2nd code snippet should yield the expected results. Does it show any error messages in the console after running that statement? — Ryan, Oct 17 '15 at 19:45
nothing at all, it adds the value to the selectpicker but just doesn't select it - it defaults it to "Nothing Selected" — Chris Jones, Oct 17 '15 at 19:53
If all the solutions above aren't working, double check that your selector is valid, e.g: console.log($('#myselect')); If not, you may have a problem with your select id. — Towelie, Mar 05 '20 at 17:52

score 70 · Accepted Answer · answered Oct 17 '15 at 22:03

70

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/

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 selected attribute already applied:

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

answered Oct 17 '15 at 22:03

Daniel Trebbien

38,421
18
121
193

Awesome! That was it! Facepalm! Serisouly, amazing how someone else looking at your code can spot somethig obvious (val instead of value) that you have been searching for, for hours. Thanks v much :) – Chris Jones Oct 18 '15 at 08:31
is it woking in searchable selctpiker ? – always-a-learner Jun 24 '17 at 08:27
i cant get it to work in searchable picker – mike01010 Aug 20 '22 at 21:08

score 5 · Answer 2 · answered Jul 09 '19 at 11:56

For adding options dynamically in bootstrap-selectpicker, append the option to the select and refresh the 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/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/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 selected attribute in the append option

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

score 0 · Answer 3 · answered Dec 01 '20 at 10:56

It's working on the searchable & multiselect 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>

orups · Answer 4 · 2023-01-22T10:47:56.147

0

you can easily do that using jQuery select2.Eg.

<select class="form-control" id="tagsExample">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

$("#tagsExample").select2({
  tags: true
});

Reference: https://select2.org/tagging

edited Jan 22 '23 at 10:47

answered Jan 22 '23 at 10:37

orups

59
5

bootstrap-select add item and select it

4 Answers4