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

Issue

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.

Solution

<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!!

Answered By - Guruprasad J Rao

Answer Checked By - Mildred Charles (PHPFixing Admin)