jquery - 使用 jquery 的下一个/上一个按钮从选择列表中选择选项

Question

使用 jquery 的下一个/上一个按钮导航选择选项的最佳方式是什么？当更改也更改某些 div 时，我有一个选择列表。我希望在选择列表的左侧和右侧有一个下一个和上一个按钮，而不仅仅是一个下拉菜单。

我真的无法弄清楚，我尝试了 attr 但只有在手动输入属性时才有效。

<button type="button" id="prev">Previous</button>
<select id="mycars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<button type="button" id="next">Next</button>

提前致谢。

Answer 1

描述

您可以使用 jQuery 的 .removeAttr()、attr()、.next() 和 .prev() 方法。

查看我的样本和这个 jsFiddle Demonstration

示例

$("#next").click(function() {
  var nextElement = $('#mycars > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  }
});

$("#prev").click(function() {
  var nextElement = $('#mycars > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  }
});

更多信息

• jQuery.removeAttr()
• jQuery.attr()
• jQuery.next()
• jQuery.prev()

更新

我不知道您是否要禁用下一个按钮，例如，如果选择了最后一个元素，选择第一个元素或不执行任何操作。请提供此信息。

如果选择了最后一个元素，则可以执行此操作以转到第一个元素，如果选择了第一个元素，则可以转到最后一个元素。

$("#next").click(function() {
    var isLastElementSelected = $('#mycars > option:selected').index() == $('#mycars > option').length -1;

    if (!isLastElementSelected) {     
        $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 
    } else {
           $('#mycars > option:selected').removeAttr('selected');
           $('#mycars > option').first().attr('selected', 'selected'); 
     }   
});

$("#prev").click(function() {
    var isFirstElementSelected = $('#mycars > option:selected').index() == 0;

    if (!isFirstElementSelected) {
       $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
    } else {
         $('#mycars > option:selected').removeAttr('selected');
         $('#mycars > option').last().attr('selected', 'selected'); 
    }

});

Updated jsFiddle