Using Bootstrap Multiselect Values in Django Query
Read the documentation of Bootstrap Multiselect . Anyway, just include all the files in you html page (head section), you will need these following files (JS and CSS files):
- //ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
- http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
- http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
- https://dl.dropboxusercontent.com/u/75734877/bootstrap-multiselect.css
- https://dl.dropboxusercontent.com/u/75734877/bootstrap-multiselect.js
Copy and save the files if you want to serve it with your own, and use it like this in your template:
<script type="text/javascript" src="{% static "js/bootstrap-multiselect.js" %}"></script>
Then refer to this JSFiddle for demo.
Let's say you have this select element in your page with the id, "bldg_type"
<select class="form-control" id="bldg_type" multiple="multiple">
<option value="Bank">Bank</option>
<option value="Barangay Hall">Barangay Hall</option>
<option value="Cemetery">Cemetery</option>
<option value="Factory">Factory</option>
<option value="Fire Station">Fire Station</option>
<option value="Gas Station">Gas Station</option>
<option value="Market">Market</option>
<option value="Medical Institutions">Medical Institutions</option>
<option value="Other Commercial Establishments">Other Commercial Establishments</option>
<option value="Other Government Offices">Other Government Offices</option>
<option value="Police Station">Police Station</option>
<option value="Religious Institutions">Religious Institutions</option>
<option value="School">School</option>
<option value="Sport Center/Gymnasium/Covered Court">Sport Center/Gymnasium/Covered Court</option>
<option value="Telecommunication Facilities">Telecommunication Facilities</option>
<option value="Transport Terminal">Transport Terminal</option>
</select>
OnDOMReady, initialize the plug-in like this:
$("#bldg_type").multiselect({
buttonWidth: "200px"
});
In my case I used those values for my query, this is how I get all the selected values in the function:
function r(e) {
var t = $("#bldg_type option:selected"),
r = [];
return t.each(function () {
r.push($(this).val())
}), $.ajax({
url: "cnt_bldg/",
type: "GET",
dataType: "JSON",
data: {
brgy_id: e,
bldg_type: r,
munisipyo: $("#munisipyo").val()
}
...
And in your views.py, you can get those value with this:
get_bldg_type = request.GET.getlist('bldg_type[]', default='All')
Here's a sample query I made:
if get_bldg_type != 'All':
args.append(Q(bldg_type__in=get_bldg_type))

Comments
Post a Comment
Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.