Question

使用jquery使用next / previous按钮导航选择选项的最佳方法是什么？我有一个选择列表，当更改也改变一些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');
  }
});

更新

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

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

$("#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

Answer 2

这是一个很好的短版本，不会在任何一端包裹：

$("#next, #prev").click(function() {
    $("#mycars :selected")[this.id]().prop("selected", true);
});

请注意，这取决于id和next按钮的prev，它们位于您的示例中。

这是working example。

使用prop代替attr意味着我们实际上更改了属性，而不是属性的值。这意味着没有必要像其他答案一样使用removeAttr，这意味着我们不会卡在第一个或最后一个选项上。

Answer 3

设置列表的选定值，你应该尝试这样的事情：

$("#mycars").val("saab");

Answer 4

这样的事情应该有效 -

$("#next").click(function() {
    $("#mycars").val($("#mycars > option:selected").next().val());
})

$("#prev").click(function() {
    $("#mycars").val($("#mycars > option:selected").prev().val());
})

有趣的是，当使用下一个按钮时，这将“环绕”（在“奥迪”之后返回“沃尔沃”选项），但在使用“上一个”按钮时停在“沃尔沃”选项。这是一个演示 -

http://jsfiddle.net/aQSSG/

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

4 个答案:

描述

示例

更多信息

更新

Updated jsFiddle