bootstrap-select add item and select it
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/[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>For better, add the selected attribute in the append option
// Append the option to select
$('#myselect').append('<option value="'+newitemnum+'" selected>'+newitemdesc+'</option>');
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");