Select .change ()

Question

I have several selection fields that allow users to enter the time that I pass to another page using

<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 the field under the "Destination From" heading is changed, the value of the "Destination To" parameter will be changed to the same thing. I managed to accomplish this using the following:

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

This works as expected. Now I want to change the minutes, but instead of being changed to the same value, I would like to move on to the next. Ex. I select 05 under, from 10 under until will be selected. I tried using the following, but it did not work:

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

Answer 1

I would use a jQuery filter function that has an overload that takes 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 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()); }); 

Answer 2

You can get the selected index in the current select , and then get the next parameter value. Flip to zero if the user selects "55":

 $('select[name="fromm"]').change(function() { var index = (this.options.selectedIndex+1)%this.options.length; $('select[name="tom"]').val(this.options[index].value); }); 

JSFiddle: http://jsfiddle.net/eZBNG/1

Answer 3

I am not an expert, I hardly know what I am actually doing, but will this not work too?

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

It may take a little logic to see if there is the following?