Reset multiple dropdown (select) filters to “All” ( top option) after another option is selected

Question

There is a #filter div which holds the 3 selects: #dpmt_filter, #area_filter and #moi_filter. I cannot get it to "reset" the other 2 select boxes (ignoring current select box) to the "All" option (which is the top option). I thought it would be something like:

$('#filters :input').not($(this)).val('all');

but it did not work. Any idea how I can reach the other select boxes and ignore the current?

jQuery(document).ready(function($){
$('#courses_listing div.accordion').addClass('active');
$('#filter :input').change(function(){
    var current_value = $(this).val();
    //$('#filters :input').not(current_value).val('all');
    if(current_value=="all")
    {
        $('#courses_listing p').remove('.no-courses');
        $('#courses_listing div.accordion').removeClass('hidden').addClass('active');
        $('#filters :input').val('all');
    }
    else
    {
    if ($('#courses_listing').find('.accordion').hasClass('hidden')){
            $('#courses_listing').find('.accordion').not('.' + $(this).val()).removeClass('active').addClass('hidden'); // changes other values from active to hidden.
            $('#courses_listing').find('.accordion' + '.' + current_value).removeClass('hidden').addClass('active'); // changes selected value from hidden to active.
    } else if ($('#courses_listing').find('.accordion').hasClass('active')){
            $('#courses_listing').find('.accordion').not('.' + $(this).val()).removeClass('active').addClass('hidden'); // changes selected value from active to hidden.
        }
        if (!$('#courses_listing div.accordion').hasClass('active')) {$('#courses_listing div#filters').after('<p class="no-courses">There are no courses with the current filter.</p>');}
        else{$('#courses_listing p').remove('.no-courses');}
  }});
});

Just to add, here is an example of one select box inside the #filters div:

<div id="filters">
    <div id="dpmt_filter">
        <p>Select box 1</p>
        <form action="<?php bloginfo('url'); echo $_SERVER["REQUEST_URI"]; ?>" method="get">

      <?php // Grabs Department terms and displays them         
            $dpmts = get_terms('departments', array(
                        'orderby'    => 'name',
                        'hide_empty' => 0
                    ) );
            ?>
          <select id="departments">
                <option value="all">All</option>
          <?php foreach ($dpmts as $dpmt) : ?>
              <option value="<?php echo $dpmt->slug; ?>"><?php echo $dpmt->name; ?></option>
          <?php endforeach; ?>
          </select>
    </form>
  </div>
</div>

Answer 1

Without your markup, I can't really get it, however since I see you're capturing 'current_value', why not just set all inputs to 'All' and THEN set the original back:

$('#filters :input').each(function(e) {
    $(this).val('all');
});
$(this).val(current_value);

I'm sure this can be modified to use .not() .

Answer 2

If by writing

$('#dpmt_filter :input').change(function(){

you wanted to add change listener to #dpmt_filter select, it is wrong. You should write

$('#dpmt_filter').change(function(){

Because "#dpmt_filter :input" selects any input, textarea, select or button inside your #dpmt_filter select, which is not your case I think. Therefore, this in change listener doesnt refer to your #dpmt_filter select

By the way, did you tried to debug your change listener? It will be strange if that listener ever gets called, because it means that you have put some input or button or textarea inside your #dpmt_filter select

Answer 3

There is no functionality provided by jQuery to check for "open" select boxes, that I know of.

In order to set all the select boxes to the first one I would do:

$('select').find('option:first').prop('selected', 'selected');

I recommend using .prop() in stead of .attr(), more in this thread . To be precise, in this case Chrome will give you trouble, haven't tested it on other browsers.

I would propose the following:

$('#filter select').on('change', function() { // when a new value is selected
  $('#filter select')              // get all the select boxes
    .not(this)                     // except the one clicked
    .find('option:first')          // get it's first option
    .prop('selected', 'selected'); // mark it as selected
});

I'm sure it's possible to optimize it accessing all the binded elements in stead of searching for them again.

Hope it helps!