Add an extra class to views exposed filter “select” if default option is selected

Question

I have some views exposed filters and need to add an extra class "test" to each list if it has default option selected. I try to implement it using jquery with the following code:

function ($) {
$(document).ready(function () {
    $('.form-select option:eq(0)').prop('selected', true);
      $(".form-select").addClass("test").on('change', function() {
      var optionIndex = $(this).find('option:selected').index();
      $(this).toggleClass('test', optionIndex === 0);
   }); 
}); 
})(jQuery);

Question is how to make this code to act properly in Drupal 7? Currently it adds the "test" class to all the dropdown lists after the page load. But if you chose any not default value in any list the "test" classes of all lists (even where default option is selected) disappeared and never appeared again until the page reload.

Answer 1

Change the selector and class name to your needs, but this should work.

(function ($) {

  $("select")
    .change(function() {
      if ($(this).val() === $(this).find('option[selected]').val()) {
        $(this).addClass('default-value-selected');
      }
      else {
        $(this).removeClass('default-value-selected');
      }
    })
    .trigger("change");

})(jQuery);

Answer 2

Well, proper solution of my task is represented below:

(function ($) {
$(document).ajaxStop(function() {
    $("select").each(function() {
          var optionValue = $(this).find('option:selected').val();
          $(this).toggleClass('made_choice', optionValue !== 'All');
    });
  });
})(jQuery);

Once again I've proved to myself: if you want to do something in the best way - do it by your own. So, the first problem was script starting by .ready(function()). It is wrong in case of exposed filters and AJAX loading procedure. You should start it by .ajaxStop(function()) to be able to fire the script every time you have chosen new value of exposed filter. The second problem is that in case of two and more exposed filters on the form indexes of their options starting from 0 in the first used filter and finishing with the index of last option in last filter widget. Thus, you can not say that (optionIndex === 0) for every default value in each filter widget. So it will be more proper way in such case to check whether the option:selected has value 'All' or not.