jquery bootstrap selectpicker refreshing lists based upon previous list choice

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.

Suspect the problem is being caused by myself calling .selectpicker('refresh'); at the wrong moment. — n34_panda
– n34_panda, Commented Oct 5, 2014 at 20:11

LeftyX · Accepted Answer · 2015-09-20 17:00:07Z

99

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.

edited Sep 20, 2015 at 17:00

LeftyX

35.6k21 gold badges139 silver badges201 bronze badges

answered Oct 6, 2014 at 15:41

Athina

1,1769 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

n34_panda Over a year ago

Yup, simple as that - i just need to gain a better understanding of it all! thanks.

Leukipp Over a year ago

I had a similar problem when I was modifying attributes of the select fields (e.g., setting the attribute title). Calling selectpicker (with or without 'refresh') after this caused that the values were not selected. When I call the function before changing the attributes it works fine.

dat3450 Over a year ago

In my case it required the following: $(document).ready(function () {$('.selectpicker').selectpicker('refresh');});

FilT Over a year ago

agreed with @dat3450, this did the trick for me, in order to refresh the selectpicker in order to appear in the frontend and not only on the code. The value wouldn't appear selected unless I clicked the dropdown

Rameshwar Vyevhare · Accepted Answer · 2016-02-17 11:54:51Z

9

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.

answered Feb 17, 2016 at 11:54

Rameshwar Vyevhare

2,7792 gold badges30 silver badges34 bronze badges

1 Comment

Flyout91 Over a year ago

Personnally I never had to call the first function. I just have to add the option and then call refresh

Faiyaz Md Abdul · Accepted Answer · 2018-02-02 07:58:11Z

9

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

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

answered Feb 2, 2018 at 7:58

Faiyaz Md Abdul

6775 gold badges15 silver badges29 bronze badges

Comments

Zaid Mirza · Accepted Answer · 2016-11-14 18:26:07Z

3

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

edited Nov 14, 2016 at 18:26

Zaid Mirza

3,7392 gold badges27 silver badges42 bronze badges

answered Jul 1, 2016 at 11:37

Rajdeep

2802 silver badges11 bronze badges

Comments

Nadav · Accepted Answer · 2016-10-31 16:22:19Z

2

Changing selectpicker class name when hidden:

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

When refreshing:

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

answered Oct 31, 2016 at 16:22

Nadav

63411 silver badges26 bronze badges

Comments

Mikhail Makeev · Accepted Answer · 2022-09-05 14:58:42Z

1

I've added destroy before refresh, thats solved my issue.

// ... option:selected manipulation
$('.selectpicker').selectpicker('destroy');
$('.selectpicker').selectpicker('refresh');

answered Sep 5, 2022 at 14:58

Mikhail Makeev

3293 silver badges8 bronze badges

Comments

Victor Spinu · Accepted Answer · 2023-03-22 11:07:55Z

0

After success ajax response

var urlParams = new URLSearchParams(window.location.search);
if (dataResult) {
  $('#select').html('');
  var html= '';
  $.each(dataResult, function () {
       html+= ' <option value="' + this.id + '">' + this.name + '</option>';
  });
  $('#select').append(html);
  $('#select').selectpicker('refresh');
  if(urlParams.has(type) && urlParams.get(type)!=''){
    $('#select option[value=3]').prop('selected', true);
    $('#select').selectpicker('refresh');
  }
}

answered Mar 22, 2023 at 11:07

Victor Spinu

1

Collectives™ on Stack Overflow

jquery bootstrap selectpicker refreshing lists based upon previous list choice

7 Answers 7

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related