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();
});