Bootstrap-select add item and select it

Question

I am using Silstio Moreto Bootstrap Select.

On my page, I have a button that opens a modal form with an input field that allows you to add an element to the selectpicker element. Then I would like to automatically select this element, but I cannot get it to work.

The code I have is:

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

But that just doesn't work. No item selected.

I tried replacing the selection string with:

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

but it does not work.

Any ideas that were highly appreciated (although the item is added to the selectpicker).

Answer 1

You have a typo. Instead:

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

You need:

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

Here is the JSFiddle daemon: http://jsfiddle.net/xbr5agqt/

The Add button and select Soy Sauce will add the following:

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

One slightly faster approach (used by the Add button and select Repeat) to add a new <option> element with the selected attribute already applied:

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

Answer 2

To dynamically add options to bootstrap-selectpicker , append option to select and 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/ 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 best add the selected attribute to the add option

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