when i try to put multiple selects on website (more than 20) it slows down jquery execution (with stop/continue alert) - is there a chance to optimize the code to load it faster - it takes minutes to load?

sample code

<td><select class="selectpicker" name="ref[240][sub_class]">
<option value=0 selected="selected" >A</option>
<option value=1>B</option></select></td>
<td><select class="selectpicker" name="ref[265][sub_class]">
<option value=0>A</option>
<option value=1 selected="selected" >B</option></select></td>

javascript at the end of the file:

        $(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 1
  });
});

when i try to put multiple selects on website (more than 20) it slows down jquery execution (with stop/continue alert) - is there a chance to optimize the code to load it faster - it takes minutes to load?

sample code

<td><select class="selectpicker" name="ref[240][sub_class]">
<option value=0 selected="selected" >A</option>
<option value=1>B</option></select></td>
<td><select class="selectpicker" name="ref[265][sub_class]">
<option value=0>A</option>
<option value=1 selected="selected" >B</option></select></td>

javascript at the end of the file:

        $(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 1
  });
});

• javascript
• jquery
• twitter-bootstrap
• bootstrap-select

• 1 The following #bootstrap-select issues thread from others who have hit the issue, may help: github.com/silviomoreto/bootstrap-select/issues/291 – Mike Burati Commented Apr 29, 2014 at 15:32
• Was also very slow for me but I was using an older version - 1.6. About 1300 options were taking 3-4 seconds on a refresh... Switched to version 1.13 and the refresh is instantaneous. – Koshera Commented Feb 26, 2019 at 22:59

4 Answers 4

I was working with bootstrap select too. This trick solved my problems about bootstrap-select rendering delays on page loading: it seems that on page load, dom element usually render before selectpicker, this is making the CSS "rescale" which cause an horrible effect.

Usually selectpicker takes 500ms for the first rendering, you can force the rendering after the element definition like following avoiding this delay like follow:

<select class="selectpicker" id="your_select">
   <option>...</option>
   ...
   <option>...</option>
</select>
<script>
   $("#your_select").selectpicker("render");
</script>

Guess it helps :)

In my case it was also totally OK to simple take the

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

out of

$(document).ready(function() ...

For me, forcing rendering immediately after the js loading made the select appear practically instantly instead of waiting for the entire page to load:

<script src="~/assets/js/bootstrap-select.min.js"></script>
<script>
    $(".selectpicker").selectpicker();
</script>

For me, was problem with bootstrap conflict. I use this in CMS Joomla, so loaded from me Bootstrap conflict with another(from CMS). As I removed duplicate files - all start work good

Regards OrdaSoft team