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.

score 13 · Answer 1 · answered Mar 13 '16 at 21:45

13

have you tried simple

$('#bldg_type').val()

It works in my bootstrap-multiselect.

answered Mar 13 '16 at 21:45

kite

1,478
1
15
27

1

$('#multiselectId').val() works well , i get all selected values , i.e. ["1","3","8"] – Gurpreet Singh Jan 23 '17 at 09:48

score 4 · Answer 2 · answered Jul 10 '17 at 18:11

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

score 3 · Accepted Answer · answered Apr 20 '15 at 04:11

3

<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 Apr 20 '15 at 04:11

Guruprasad J Rao

29,410
14
101
200

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 `[]`. – Sachi Tekina Apr 20 '15 at 07:28
1

yea that means list of parameters.. Check **[this link](http://stackoverflow.com/questions/5216162/how-to-create-list-field-in-django)** too.. – Guruprasad J Rao Apr 20 '15 at 07:29
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 – pat capozzi Jul 09 '15 at 20:59
I have already mentioned that in the answer!! `var selected = [];` to be declared globally.. – Guruprasad J Rao Jul 10 '15 at 04:36

score 3 · Answer 4 · answered Feb 02 '16 at 20:06

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

score 0 · Answer 5 · answered Jun 28 '22 at 15:05

0

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);
});

answered Jun 28 '22 at 15:05

Zsolti

1,571
1
11
22

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

5 Answers5