CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapplugins
Del Monte
Del Monte

Reputation: 153

How do I display selected values using Bootstrap Multiselect

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="Damage_@item.Id" name="Damage_@item.Id" class="form-control multiselect" style="margin-bottom: 10px;" multiple="multiple">
                            <option value="0" selected>Pick One</option>
<input type="hidden" id="Hidden_Damage_@item.Id" name="Hidden_Damage_@item.Id" 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>

Upvotes: 1

Views: 8829

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

<script src="https://cdnjs.cloudflare.com/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>

Upvotes: 4

Related Questions