bootstrap select picker multiple select

Question

I have a bootstrap selectpicker and what I am trying to do is get multiple options selected once I load the page. I am passing in a string from a servlet to a script.

I have a selectbox in my html with an id, Project1, and class, selectBox.

In my script:

$(document).ready(function() {
  $('.selectBox').selectpicker();
});

var index2="${projectindex}";
$('#Project1').selectpicker('val',index2);

projectindex is the variable being passed from the servlet (using jsp). I checked it and it passes correctly to something similar to this:

['project1' , 'project2']

These two are values in the select box, but they are not selected once the document loads. Can someone tell me what I did wrong?

Thanks for any help!

Answer 1

In case you haven't solved this in a month. I think the reason why it doesn't show the selected items after the document loads is because you are calling selectpicker initializer two times when you should call it once.

You just have to populate your select as you would normally and just call the selectpicker inside the document.ready . For example:

In my JSP, I have a multiple select to choose days of the week which I pass through the servlet using an array, and I want some of them to be selected:

<select class="selectpicker" multiple name="dayGroup" title="Select days">
  <c:forEach var="weekDay" items="${weekDays}">
    <option value="${weekDay}" ${fn:contains(days, weekDay) ?'selected' : ''}>${weekDay}</option>
  </c:forEach>
</select>

Where weekDays is an array containing the names of the days of the week and days is a List with some of the days.

And in Javascript I just have this:

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

And it shows alright.