Я создал функцию фильтрации для своего сайта, но javascript не работает

Я создал опцию фильтрации товаров по бренду Итак, в моем 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>

И я делаю скрипт для этого Итак, в моем function.js

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

И я также соединил шаблон с js-файлом

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

с помощью этого кода. Я уверен, что js файл связан с шаблоном, но функция фильтра не работает. А также В моем 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,
    }

Пожалуйста, помогите мне с этим!!!

Я думаю, что проблема возникает из-за того, что вы пытаетесь добавить слушателя события click к опциям в выпадающем списке select. Однако событие click не очень хорошо работает с элементами опций во всех браузерах. Вместо этого вам следует добавить слушатель события change в сам элемент select. Попробуйте сделать что-то вроде этого:

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

Это будет записывать в журнал "Опция выбрана" каждый раз, когда в выпадающем списке будет выбрана другая опция. Если вы хотите получить значение выбранной опции, вы можете использовать this.value внутри функции-обработчика события, например, так:

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

Удачи!

Вернуться на верх