Выберите .change ()

Question

У меня есть несколько полей выбора, позволяющих пользователям вводить время, которое я передаю на другую страницу:

<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>

Что я хочу сделать, так это то, что при изменении поля под «Назначение с»значение, указанное в разделе «Назначение», должно быть изменено на то же.Мне удалось сделать это, используя следующее:

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

Это работает, как ожидалось.Теперь я хочу изменить минуты, но вместо того, чтобы изменить их на то же значение, я бы хотел перейти к следующему.Ex.Я выберу 05 под от, 10 под до будет выбран.Я попытался использовать следующее, но это не сработало:

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

Answer 1

Я бы использовал функцию фильтра jQuery, которая имеет перегрузку, которая принимает функцию.

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

Или, чтобы быть действительно безопасной:

$('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

Я не эксперт, вряд ли знаю, что я делаю на самом деле, но разве эта работа тоже не будет?

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

Может быть, нужно немного логики, чтобы увидеть, есть ли следующий?

Answer 3

Вы можете получить выбранный индекс в текущем select, а затем получить значение следующего параметра.Перейдите к нулю, если пользователь выбрал «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