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

Question

I am using 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 query, the snippet of my Ajax code:

$.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 I can only get 1 value. For e.g. I check Market and Police Station in my select option, and looked it in my console http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type=Market". It only gets the Market.

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

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

Larina

Answer 1

<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 an Id multiselect to your select control.

Declare a variable globally in your javascript as below:

var selected = [];

Initialize it as below [from the answer 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 - While manipulating the received values, accept it as List of strings in your server method!!

Pleonasm

I tried this, it returns something like this: http://127.0.0.1:8000/cnt_bldg/?brgy_id=All&bldg_type%5B%5D=Market&bldg_type%5B%5D=Transport+Terminal% in which it is a []. – Larina

yea that means list of parameters.. Check this link too.. – Pleonasm

Using this example I found I had to add a line to the event handler as follows var brands = $('#multiselect1 option:selected'); selected = []; $(brands).each(function(index, brand){ selected.push([$(this).val()]); }); otherwise the selected array ended up with multiple entries – Lubricator

I have already mentioned that in the answer!! var selected = []; to be declared globally.. – Pleonasm

Answer 2

have you tried simple

$('#bldg_type').val()

It works in my bootstrap-multiselect.

Absolute

$('#multiselectId').val() works well , i get all selected values , i.e. ["1","3","8"] – Unwilled

Answer 3

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()

Campanulaceous

Answer 4

Its really simple to get the values of the multiselect options.

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

The selectedOptions should give you a list of selected options. It gives all the values which are selected from the options in the select tag.

You could define the selectedOptions variable some where globally so that the ajax call can access it.

Good luck and hope it helps

Recursion

Answer 5

My solution is a bit more tricky, but it worked for me.

var selectedValues = [];
$('#bldg_type').next().find('input[type=checkbox]:checked').each(function(i,e){
    selectedValues.push(e.value);
});

Scriptwriter