I am using Bootstrap Multiselect plugin for developing a drop-down which includes check boxes.

The values gets sent properly into my DB while submitting. But, while retrieving the same selected data, I can't seem to display multiple values.

When there is just one selected values, it gets displayed perfectly using .val() but when multiple values are present the .val() fails to display anything.

So, I tried searching the Bootstrap Multiselect site and found .multiselect('select',values) method.

Now, the multiple values are getting displayed but there are two dropdowns now.

Maybe because I am calling .multiselect twice. Please help me in displaying multiple values and a single dropdown. Here's my code:

<select id="[email protected]" name="[email protected]" class="form-control multiselect" style="margin-bottom: 10px;" multiple="multiple">
                            <option value="0" selected>Pick One</option>
<input type="hidden" id="[email protected]" name="[email protected]" value="@item.Damage" />
</select>


<script type="text/javascript">
        $(document).ready(function () {
            //$(function () {
                $('.multiselect').multiselect({
                    onInitialized: function (select, container) {


                        var selectedDamageValues = $('#Hidden_' + select[0].id).val();
                        console.log(selectedDamageValues);
                        var array = selectedDamageValues.split(",");



                },
        numberDisplayed: 1,
            buttonWidth: '100%'
            });
        //});
    });
</script>

I am using Bootstrap Multiselect plugin for developing a drop-down which includes check boxes.

The values gets sent properly into my DB while submitting. But, while retrieving the same selected data, I can't seem to display multiple values.

When there is just one selected values, it gets displayed perfectly using .val() but when multiple values are present the .val() fails to display anything.

So, I tried searching the Bootstrap Multiselect site and found .multiselect('select',values) method.

Now, the multiple values are getting displayed but there are two dropdowns now.

Maybe because I am calling .multiselect twice. Please help me in displaying multiple values and a single dropdown. Here's my code:

<select id="[email protected]" name="[email protected]" class="form-control multiselect" style="margin-bottom: 10px;" multiple="multiple">
                            <option value="0" selected>Pick One</option>
<input type="hidden" id="[email protected]" name="[email protected]" value="@item.Damage" />
</select>


<script type="text/javascript">
        $(document).ready(function () {
            //$(function () {
                $('.multiselect').multiselect({
                    onInitialized: function (select, container) {


                        var selectedDamageValues = $('#Hidden_' + select[0].id).val();
                        console.log(selectedDamageValues);
                        var array = selectedDamageValues.split(",");



                },
        numberDisplayed: 1,
            buttonWidth: '100%'
            });
        //});
    });
</script>

• javascript
• jquery
• html
• twitter-bootstrap
• plugins

• add html of drop down you used – Vaibhav shetty Commented Nov 8, 2017 at 10:49
• added drop down code – Del Monte Commented Nov 8, 2017 at 10:56

1 Answer 1

You have to use the $(selector).multiselect('select', [array of values]); to assign select item programticly

see below snippet :

$(document).ready(function() {
  $('#example-getting-started').multiselect({
    enableFiltering: true,
    buttonText: function(options, select) {
      if (options.length == 0) {
          return 'Select Groups';
      }
      else {
          var selected = '';
          options.each(function() {
              selected += $(this).text() + ', ';
          });
          return selected.substr(0, selected.length -2);
      }
    }
  });
  
  $('#example-getting-started').multiselect('select', ['one', 'four']);

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
</select>