Jquery Bootstrap Selectpicker Refreshing Lists Based Upon Previous List Choice

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 fi

Solution 1:

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.

Solution 2:

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.

Solution 3:

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

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

Solution 4:

Changing selectpicker class name when hidden:

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

When refreshing:

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

Solution 5:

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