jquery bootstrap selectpicker refreshing lists bas

Question

I have three drop down lists, one list is populated on page load and doesn't change. The 2nd and 3rd lists may change depending on the selection. This functionality is working fine.

I have tried to add Bootstrap selectpicker to the selectors and I can see it is working - unfortunately the lists are not refreshing based upon the selection. I actually think "behind the scenes" they are as I can see the queries being passed but via the front end nothing happens.

Part of the HTML:

<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

The first two DDL's are created via php but are

<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>

I have the following Javascript:

$(document).ready(function() {  
  $(".selectpicker").selectpicker();
});

This is the point where I have discovered the problem, I am trying to implement this within the ajax on change functions without success - not even sure if it is correct.

$('.selectpicker').selectpicker('refresh');

I am pretty new to all of this so would like some help.

Answer 1

What I understood from my experience with this so far -

If you are adding dynamically options to the dropdown then you must need to call below function just before adding option

$(".selectpicker").selectpicker();

Once you completed adding options then call below function (if you are using ajax to add option then put this function into success part as just answered Athina)

$('.selectpicker').selectpicker('refresh');

If you are facing any weird issue like showing dropdown not data or sometime dropdown not showing properly then definitely you must have made mistake in placing about function and nothing else.

Answer 2

In my Ajax successCallBack I am trying to manipulate drop down list having id as reasonCode based on dynamicId (value get from server) as below:

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);

but unfortunately this had not worked until I added another line after this as below:

$('#reasonCode').selectpicker('refresh');

Answer 3

I found your question after having the same problem. Adding $('.selectpicker').selectpicker('refresh'); exactly after adding items to my list did the job.
So you probably need to find the correct place to put it. Maybe in the success part of your ajax call.

Answer 4

if refresh method doesn't help, try adding some delay.

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);

Answer 5

Changing selectpicker class name when hidden:

<select name="key" class="selectpicker_oncreate">

When refreshing:

$('.selectpicker_oncreate').selectpicker('refresh');