javascript - Select .change() - Stack Overflow

admin管理员组

文章数量:1301502

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

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

• javascript
• jquery
• html
• forms
• select

Share Follow edited Dec 7, 2011 at 21:16 Meisam Mulla asked Dec 7, 2011 at 21:06 Meisam MullaMeisam Mulla 1,87133 gold badges2323 silver badges3737 bronze badges 2

• 1 A small observation but you haven't got an opening quote on fromm or tom (or rather you have, but it es after the fromm or tom). – ClarkeyBoy Commented Dec 7, 2011 at 21:12
• I have updated the code but it still doesn't work. – Meisam Mulla Commented Dec 7, 2011 at 21:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

I'm no expert, hardly know what I'm doing actually, but wouldn't this work too?

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

Maybe need a little logic to see if there is a next?

You can get the selected index in the current select, then get the next option's value. Roll over to zero if the user selected "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/eZBNG/1

本文标签： javascriptSelect change()Stack Overflow