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.