Question

我已经坚持了很长一段时间了，不能自己解决。说我有这个选择：

<select>
    <optgroup label="NFC EAST">
      <option>Dallas Cowboys</option>
      <option>New York Giants</option>
      <option>Philadelphia Eagles</option>
      <option>Washington Redskins</option>
    </optgroup>
    <optgroup label="NFC NORTH">
      <option>Chicago Bears</option>
      <option>Detroit Lions</option>
      <option>Green Bay Packers</option>
      <option>Minnesota Vikings</option>
    </optgroup>
</select>

我有两个按钮 - 下一个和上一个。如果有人点击下一个，则选择下一个选项，反之亦然。我遇到的问题是 - 在这种情况下，我如何完全忽略 optgroups？（即如果选择了Chicago Bears，则按前一个应选择Washington Redskins）。

here's a jsfiddle说明了这个问题。我已经尝试了很多解决方案，但是所有这些解决方案都非常快速。有任何想法吗？

提前致谢！

Answer 1

您可以检查上一个或下一个option是否存在，如果不存在，请执行某些逻辑，如果是，请使用它（此处为先前的示例）

$('#prev').on('click', function() {
    var current = $('select option:selected'),
        previous = current.prev("option");

    if (previous.length)
        $('select').val(previous.val());
    else
        $('select').val(current.closest("optgroup").prev("optgroup").find("option:last").val());
});

Answer 2

您可以使用.index()，从匹配的元素中搜索给定元素。

$('#next').on('click', function () {
    var selected = $('select option:selected');
    var index = $('select option').index(selected);
    var value = $('select option').eq(index + 1).val();
    $('select').val(value);
});

$('#prev').on('click', function () {
    var selected = $('select option:selected');
    var index = $('select option').index(selected);
    var value = $('select option').eq(index - 1).val();
    $('select').val(value);
});

DEMO

jQuery在忽略optgroups的同时操纵选择框

2 个答案: