How to get all selected values ​​using Bootstrap Multiselect and use it in AJAX

Question

I use Bootstrap Multiselect , this is my setup in my HTML:

<div class="form-group"> <select class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %} <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %} </select> </div> 

I wanted to use the selected values ​​for my request, Ajax code snippet:

 $.ajax({ url: "cnt_bldg/", type: "GET", dataType: "JSON", data: { 'brgy_id': brgy_id, 'bldg_type': $('#bldg_type option:selected').val() }, ... 

The problem with $('#bldg_type option:selected').val() is that I can only get 1 value. E.g. I check Market and Police Station in my selection option and view it in the console http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market". It only gets Market .

How do I get all the values ​​and use them for my query?

By the way, I am using Django. I already read this answer , but I don't know how to use the result in my AJAX code above.

Answer 1

Have you tried simple

 $('#bldg_type').val() 

It works in my bootstrap-multiselect.

Answer 2

 <div class="form-group"> <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %} <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %} </select> </div> 

Add the multiselect identifier to the select control.

Declare the variable globally in your javascript, as shown below:

 var selected = []; 

Initialize it as below [from the response link you provided]

 $('#multiselect1').multiselect({ selectAllValue: 'multiselect-all', onChange: function(element, checked) { var brands = $('#multiselect1 option:selected'); $(brands).each(function(index, brand){ selected.push([$(this).val()]); }); } }); 

Send it through your ajax.

 $.ajax({ url: "cnt_bldg/", type: "GET", dataType: "JSON", data: { 'brgy_id': brgy_id, 'bldg_type': selected //This will send the values as list of strings }, ... 

Note. . When manipulating the resulting values, take it as a list of strings in the server method.

Answer 3

Its very simple to get multi selector parameter values.

 $('#bldg_type').multiselect({ onChange: function(){ var selectedOptions = $('#bldg_type').val(); console.log(selectedOptions); }}) 

SelectedOptions should provide you with a list of selected options. It gives all the values ​​that are selected from the parameters in the select tag.

You can define the selectedOptions variable somewhere globally so that the ajax call can access it.

Good luck and hope this helps

Answer 4

HTML

 <div class="form-group"> <select id="multiselect1" class="form-control" id="bldg_type" multiple="multiple">{% for type in buildings %} <option value="{{type.bldg_type}}">{{type.bldg_type}}</option>{% endfor %} </select> </div> 

Jquery

 var selected = $('#multiselect1').val()