选择 .change()

Posted 2023-03-05

【中文标题】选择 .change()

【英文标题】：Select .change()

【发布时间】：2012-01-15 09:22:32

【问题描述】：

我有几个选择框让用户输入我传递到另一个页面的时间：

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

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

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

【问题讨论】：

一个小小的观察，但你没有得到 fromm 或 tom 的开场白（或者更确切地说你有，但它出现在 fromm 或 tom 之后）。

我已经更新了代码但是还是不行。

【参考方案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());
);

【讨论】：

我自己也想放一些类似的东西，你打败了我！

这里唯一的问题是使用.val() - 任何选项都没有值属性，所以我不相信 .val() 会返回任何东西，我几乎可以肯定即使有 value 属性，$("option").val() 也不会返回任何内容，因为 .val() 应该在 select 或 input 上。

@ClarkeyBoy - 是的，如果选项上有值，您可以通过 .attr("value") 获得它们 - 谢谢。或者对于 OP 的情况，我将其更改为 text()。 val() 仍然可以在实际的选择标签上工作

@ClarkeyBoy - 很抱歉打败了你 - 我现在已经结束了，所以我今天结束了 - 祝下一个问题好运 :)

@MeisamMulla - 我的第二个有（另一个）错字 - 现在也已修复 - 是时候休息一下了 :)

【参考方案2】：

可以在当前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

【参考方案3】：

我不是专家，几乎不知道我实际上在做什么，但这不是也行吗？

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

也许需要一点逻辑来看看是否有下一个？