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 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

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.

Advertisement

Answer