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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.