javascripthtmljquerybootstrap-selectpicker

How to add option to select list in jQuery whit "selectpicker" class?

I have 2 select list and I want add option to both select lists in jQuery. I add option with bellow code in jQuery but this work just on list1 and not work on list2 with id=mySelect2 because list2 have class.

$("#mySelect1").append(new Option("option text", "value"));
$("#mySelect2").append(new Option("option text", "value"));

MY Jsfiddle is here.

List1:

<select id='mySelect1'     >
<option value="4444">4444</option>
<option value="Elite1">Elite1</option>
<option value="Elite">Elite</option>
</select>

List2:

<select id='mySelect2'   data-live-search="true" data-live-search-style="startsWith" class="selectpicker"  >

<option value="4444">4444</option>
<option value="Elite1">Elite1</option>
<option value="Elite">Elite</option>

</select>

How can I add option to list2?

I use this link but not work too.

Solution

  • You can use the refresh method to add (or, even remove) options. You may do something like this:

    $(function () {
    $('#mySelect2').selectpicker();
});

$('#addButton').click(function(){
    let valuetoadd = prompt('What to add?');
  $('#mySelect2,#mySelect1').append(`<option value="${valuetoadd}">${valuetoadd}</option>`);
  $('#mySelect2').selectpicker('refresh');
})
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

 
    


<select id='mySelect1'     >
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
</select>

<hr>


<select id='mySelect2'   data-live-search="true" data-live-search-style="startsWith"  >

<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>

</select>

<button id="addButton">
Add New Value
</button>