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

  1. //ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
  2. http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
  3. http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
  4. https://dl.dropboxusercontent.com/u/75734877/bootstrap-multiselect.css
  5. 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

Popular posts from this blog

BECK Live Action

Making a Video Tutorial