0

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.

0

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);
  • Thanks for trying. But your code just makes closed loop and it causes uninterrupted page reloads. My code is working while it is inserted into the pure html page. But when I've set it to Drupal site its behavior became weird. So I've thought that there are some additional tricks should be implemented to change the class of views exposed filters in Drupal. – Yurii Apr 12 '18 at 19:55
  • May be it should be somehow tethered with AJAX because my views exposed filters changing via AJAX. – Yurii Apr 12 '18 at 20:12
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.