I created a filter function for my website but the javascript is not working

I created a filter option to filter the products by brand So, In my index.html

<select id="brandFilter">
              {%  for v in vendors  %}
                <option value="">All Brands</option>
                <option value="brand1" data-filter="vendor" class="filter-checkbox" type="checkbox" name="checkbox" value="{{v.id}}">{{v.title}}</option>
                <!-- Add more options as needed -->
              {%  endfor  %}
            </select>

And I make a script for this So, In my function.js

$(document).ready(function(){
    $(".filter-checkbox").on("click" , function(){
        console.log("Clicked");
    })
})

And I also connected the template with the js file

<script src="{% static 'assets/js/function.js' %}"></script>

by this code. I am sure that the js file is connected with template but the filter function is not working. And also In my context-processor.py

def default(request):
    categories=Category.objects.all()
    vendors=Vendor.objects.all()
    try:
        address=Address.objects.get(user=request.user)
    except:
        address=None
    return {
        'categories':categories,
        'address':address,
        'vendors':vendors,
    }

Please help me out with this!!!

i think the problem comes from that you’re trying to add a click event listener to the options in your select dropdown. However, the click event doesn’t work well with option elements across all browsers. Instead, you should add a change event listener to the select element itself. Try with something like this:

$(document).ready(function(){
    $("#brandFilter").on("change", function(){
        console.log("Option selected");
    });
});

This will log “Option selected” every time a different option is selected in the dropdown. If you want to get the value of the selected option, you can use this.value inside the event handler function, like this:

$(document).ready(function(){
    $("#brandFilter").on("change", function(){
        console.log("Selected option value: " + this.value);
    });
});

Good luck!

Back to Top