Select .change()

Question

I have a few select boxes letting users input times that I pass on to the another page with:

<p class="apptmar">
    <label for="from">Appointment Starts:</label><br />
    <input type="text" name="from" id="from" class="appt" /><br />
    <select name="fromh" class="apptselect">
        <option>1</option>
        ...
        <option>12</option>
    </select>
    <select name="fromm" class="apptselect">
        <option>00</option>
        <option>05</option>
        ...
        <option>55</option>
    </select>
    <select name="froma" class="apptselect">
        <option>AM</option>
        <option>PM</option>
    </select>
</p>
<p class="apptmar">
    <label for="to">Appointment Ends:</label><br />
    <input type="text" name="to" id="to" class="appt" /><br />
    <select name="toh" class="apptselect">
        <option>1</option>
        ...
        <option>12</option>
    </select>
    <select name="tom" class="apptselect">
        <option>00</option>
        ..
        <option>55</option>
    </select>
    <select name="toa" class="apptselect">
        <option>AM</option>
        <option>PM</option>
    </select>
</p>

What I want to do is that when a box under "Appointment From" is changed the value of the one under "Appointment To" to be changed to the same one. I have managed to accomplish this using the following:

$('select[name="fromh"]').change( function() {
    $('select[name="toh"]').val($(this).val());
});

This works as expected. What I want to do now is change the minutes but instead of it being changed to the same value I would like it to go to the next one. Ex. I Pick 05 under from, 10 under to will be selected. I tried using the following but it didnt work:

$('select[name="fromm"]').change( function() {
    $('select[name="tom"]').val($(this).val() + 1);
});

Solution

I would use jQuery's filter function that has an overload which accepts a function.

$('select[name="fromm"]').change( function() {
    var $that = $(this);

    var $targetNode = $('option', 'select[name="tom"]').filter(function() {
        return $(this).text() === $that.val();
    }).next();
    $('select[name="tom"]').val($targetNode.text());
});

Or to be really safe:

$('select[name="fromm"]').change( function() {
    var $that = $(this);

    var $targetNode = $('option', 'select[name="tom"]').filter(function() {
        return $(this).text() === $that.val();
    }).next();

    if ($targetNode.length === 1)
        $('select[name="tom"]').val($targetNode.text());
});

Comments

[ClarkeyBoy]

Was gonna put something similar myself, u beat me to it!

[ClarkeyBoy]

The only issue here is the use of .val() - there are no value attributes on any of the options so I don't believe .val() would return anything, and I am almost certain that $("option").val() will not return anything even if there is a value attribute, as .val() should be on a select or input.

[Adam Rackis]

@ClarkeyBoy - yes, if there were values on the options, you would get them via .attr("value") - thank you. Or for OP's case, I changed it to text(). val() will still work on the actual select tags though

[Adam Rackis]

@ClarkeyBoy - and sorry about beating you - I'm capped now, so I'm done for the day -- good luck on the next question :)

[Adam Rackis]

@MeisamMulla - I had (another) typo in my second one - that's fixed now too - time to take a break :)

[Adam Rackis]

@ClarkeyBoy - FWIW it turns out val() does work on an option, even if you don't set its value attribute—in which case it returns the text. Here's the fiddle jsfiddle.net/nFgUG

[Adam Rackis]

@MeisamMulla - here's a fiddle with the second version working, if you're interested. jsfiddle.net/xWqLN

[ClarkeyBoy]

ok cool, good to know. I personally always tend to check if the value has been set; if not, I set it to the text anyway. That way I know the value is always going to be present.

[Meisam Mulla]

@AdamRackis I think the first one works better because when 55 is selected it automatically sets tom to 00.

[Adam Rackis]

@MeisamMulla - yes. When you select the last index the the first select, target node will not contain anything, and will set the "tom" dd to something invalid, which will reset it, and cause it to display the first item in the dd. If that's the behavior you want, and I can see why you would, then go with that :)