jQuery change function for multiple forms

I have a selector form which will show or hide other form options (so you can use either past minutes or two datepicker fields):

$('form select[name=minutes_or_date_range]').change(function () {
    if ($('form select option:selected').val() == 'date_range') {
        $('.date_range').show();
        $('.minutes').hide();
    } else {
        $('.minutes').show();
        $('.date_range').hide();
    }
});

In the html, I have two forms, both with the same code (with the exception that the ids are unique):

<p>
  <label for="search_minutes_o开发者_开发知识库r_date_range">Time Selection:</label>
  <select name="minutes_or_date_range" id="search_minutes_or_date_range"> 
    <option value="minutes" selected="selected">Past Minutes</option> 
    <option value="date_range">Date Range</option> 
  </select>
</p>
<div class="minutes" >
  <p>
    <label for="search_past_minutes">Past X Minutes:</label>
    <input id="search_past_minutes" type="text" 
           value="10" name="past_minutes" class="spinner"/>
  </p>
</div>
<div class="date_range" style="display: none">
  <p>
    <label for="search_start_date">Start Date:</label>
    <input id="search_start_date" class="date_picker" 
           type="text" name="start_date" />
  </p>
  <p>
    <label for="search_end_date">End Date:</label>
    <input id="search_end_date" class="date_picker"
           type="text" name="end_date" />
  </p>
</div>

So there are two occurrences of the above code with only the ids changed. How would I change the jQuery so this show hide function works for both of them independently? Currently, only the first one has any effect and it effects both occurrences of the div.

You will need to find the form based on the select box that was changes, and reference your changes specifically through that form... something like...

$('form select[name=minutes_or_date_range]').change(function () {
    var selectBox = $(this);
    var form = $(this).parent().parent(); //depends on where your form is

    if ($(selectBox).find('option:selected').val() == 'date_range') {
        $(form).find('.date_range').show();
        $(form).find('.minutes').hide();
    } else {
        $(form).find('.minutes').show();
        $(form).find('.date_range').hide();
    }
});

Assign a common CSS clss or REL attribute and use that in your jQuery selector.

<div id="div1" data-type="xyz">
 ...
</div>
<div id="div2" data-type="xyz">
 ...
</div>

And for your selector

$("div[data-type=xyz]").hide();

Another idea:

$('form select[name=minutes_or_date_range]').change(function () {
    if ($('form select option:selected').val() == 'date_range') {
        $('.date_range').show();
        $('.minutes').hide();
    } else {
        $('.minutes').show();
        $('.date_range').hide();
    }
});

you are using an absolute selector in your function, try making it relative.

$('form select[name=minutes_or_date_range]').change(function () {
    if ($('option:selected', $(this)).val() == 'date_range') {
        $('.date_range').show();
        $('.minutes').hide();
    } else {
        $('.minutes').show();
        $('.date_range').hide();
    }
});

You can also clean up the logic and calls for show/hide with toggle()

$('form select[name=minutes_or_date_range]').change(function () {
    $('.minutes', $(this)).toggle();
    $('.date_range', $(this)).toggle();
});