Павел

Так используйте стандартные методы....

<select class="selectpicker" data-width="fit">
    <option value="English" data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option value="Español" data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>
</select>

$('.selectpicker').change(function(){
      console.log($(this).val())
    });

Добавлю в ответ...

У вас цикл {% for product in products %} повторяет

<div class="col-md-8">
      <div class="col-md-8 products">

А должен только продукт

<div class="col-sm-4">
       <div class="product">

Вот ваш код:

<div class="container content">
  <div class="row">
    <div class="col-md-4">
      <div class="list-group">
        <a href="{% url 'products:productsList' %}"
          class="list-group-item {% if not category %}selected{% endif %}">Все</a>
        {% for c in categories %}
        <a href="{{ c.get_absolute_url }}"
          class="list-group-item {% if category.id == c.id %}selected{% endif %}">{{ c.name }}</a>
        {% endfor %}
      </div>
    </div>>
    <div class="col-md-8 products">
      <div class="row">
         {% for product in products %}
        <div class="col-sm-4">
          <div class="product">
            <div class="product-img">
            <img src="{% if product.image %}{{ product.image.url }}{% else %}{% endif %}" alt="">
            </div>
            <p class="product-title">
              <a href="{{ product.get_absolute_url }}">{{ product.title }}</a>
            </p>
            <p class="product-price">{{ product.price }} руб.</p>
          </div>
        </div>
          {% endfor %}
      </div>
    </div>
  </div>
</div>