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

这按预期工作。我现在想做的是更改分钟，但我不想将其更改为相同的值，而是希望它转到下一个。前任。我选择05以下的from，10以下的to将被选中。我尝试使用以下内容但没有成功：

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

Answer 1

我会使用 jQuery 的 filter 函数，该函数具有接受函数的重载。

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