使用带有jquery的下一个/上一个按钮从选择列表中选择选项
使用jquery使用next / previous按钮导航选择选项的最佳方法是什么？ 我有一个选择列表，当更改也改变一些div。 我希望在选择列表的左侧和右侧有一个下一个和上一个按钮，而不仅仅是一个下拉列表。
我真的没弄明白，我试过attr但只有在我手动输入属性时才能工作。
Volvo Saab Mercedes Audi 提前致谢。
描述
您可以使用jQuery的.removeAttr() ， attr() .prev()和.prev()方法。
看看我的样本和这个jsFiddle演示
样品
$("#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'); } });
更新了jsFiddle
这是一个很好的短版本，不会在任何一端包裹：
$("#next, #prev").click(function() { $("#mycars :selected")[this.id]().prop("selected", true); });
请注意，它取决于next按钮的id和prev ，它们在您的示例中。
这是一个有效的例子 。
使用prop而不是attr意味着我们实际上更改了属性，而不是属性的值。 这意味着没有必要像其他答案一样使用removeAttr ，这意味着我们不会卡在第一个或最后一个选项上。
要设置列表的选定值，您应该尝试这样的事情：
$("#mycars").val("saab");
像这样的东西应该工作 –
$("#next").click(function() { $("#mycars").val($("#mycars > option:selected").next().val()); }) $("#prev").click(function() { $("#mycars").val($("#mycars > option:selected").prev().val()); })
有趣的是，当使用下一个按钮时，这将“环绕”（在“奥迪”之后返回“沃尔沃”选项），但在使用“上一个”按钮时停在“沃尔沃”选项。 这是一个演示 –