How to get and set Bootstrap Multi select dropdown list values?

Question

I have a simple multi-select dropdown list. I want to be able to add/get data to it using jQuery as I get the data from the database. I have looked at many solutions including this question. However, none of those solutions worked for me.

The multi-select list is empty as I want to add data to it using jQuery:

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('DDLSKills');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;

for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Skills</label>
  <select id="DDLSKills" data-style="form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2">
        </select>
</div>

This is the code I was using from the above quoted question but it didn't work for me.

Any help would highly be appreciated.

Pedram · Accepted Answer · 2018-01-20T09:58:09.340

2

Use $.each like this, instead of for

var values = "Test,Prof,Off";
var splitValues = values.split(',');

/****************** Execute First ************/
$.each(splitValues, function(k, v) {
  $('#DDLSKills')
    .append($("<option></option>")
      .attr({
      "value": k,
      "selected": true
      })
      .text(v));
});

/****************** Then Multiselect ************/
$('#DDLSKills').multiselect();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<div class="form-group">
  <label>Skills</label>
  <select id="DDLSKills" data-style="form-control" class="selectpicker form-control" data-size="5" multiple data-max-options="2">
        </select>
</div>

edited Jan 20 '18 at 09:58

answered Jan 20 '18 at 06:35

Pedram

15,766
10
44
73

It still isn't working. No values are added to that list. – Mr Nobody Jan 20 '18 at 09:00
@MrNobody Which list? I see value in options. – Pedram Jan 20 '18 at 09:02
The multi-select list has no values, even I used inspect tool to check if any values were added it. – Mr Nobody Jan 20 '18 at 09:07
Even in this snippet (my example) ? or just in your code? @MrNobody Because it works fine here. – Pedram Jan 20 '18 at 09:08
Yes even the snippet, the multi-select list is not shown as a drop down list and the code does't work for me. In my code `console.log($('#DDLSKills').html());` wrote the right values to the console. However, it does not add any element to the list. – Mr Nobody Jan 20 '18 at 09:13
weird! because everyone see it's working here. Problem is something else. Try to check this snippet on other browser. – Pedram Jan 20 '18 at 09:23
1

The following did work: `$("#DDLSkills").append('');` ` $("#DDLSkills").selectpicker("refresh");` – Mr Nobody Jan 20 '18 at 09:50
@MrNobody Well, I added `Bootstrap Multiselect` cdn here, and still working fine.. But I guess what's your problem, probably you execute your `BS multiselect` code before this code, try to execute `Bootstrap multiselect` after this code. See my code order. – Pedram Jan 20 '18 at 09:59

How to get and set Bootstrap Multi select dropdown list values?

1 Answers1