bootstrap-select add item and select it

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");

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>');

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>