jQuery上下循环选择列表值答案

【问题标题】：jQuery to cycle up and down select list valuesjQuery上下循环选择列表值
【发布时间】：2011-09-11 04:36:11
【问题描述】：

使用 jQuery 应该非常简单，但我无法让它工作！在搜索中似乎也找不到任何东西......

我有一个选择列表，我想使用它旁边的 + 和 - 按钮（如数量框）来循环浏览列表值，因此用户无需单击下拉列表、滚动和选择。

实际上，我需要一个选择列表，带有“下一个”和“上一个”按钮，只需在单击时触发 jQuery 并循环上下值。

有点示例脚本会很棒。

【问题讨论】：

标签： jquery list select

【解决方案1】：

当点击上一个按钮时，执行如下操作：

var curr = $('#select').find(':selected');
var prev = curr.prev('option');
if (prev.length) {
    curr.removeAttr('selected');
    prev.attr('selected', 'selected');
}

对于下一个按钮，几乎相同：

var curr = $('#select').find(':selected');
var next= curr.next('option');
if (next.length) {
    curr.removeAttr('selected');
    next.attr('selected', 'selected');
}

【讨论】：

【解决方案2】：

鉴于以下<html/>

<select>
    <option></option>
    <option value="1">Opion 1</option>
    <option value="2">Opion 2</option>
    <option value="3">Opion 3</option>
    <option value="4">Opion 4</option>
    <option value="5">Opion 5</option>
    <option value="6">Opion 6</option>
</select>
<input type="button" value=" - " id="down"/>
<input type="button" value=" + " id="up"/>

还有脚本：

$("#up").click(function(){
    $("select option:selected").next().prop("selected", true);
});
$("#down").click(function(){
    $("select option:selected").prev().prop("selected", true);
});

注意，这依赖于 jQuery 1.6 和 .prop()，如果使用低于 1.6 的版本使用 .attr()

Example on jsfiddle

【讨论】：

我正在使用 jqtransform 来设置表单的样式，并且启用此功能后，事件将不会触发 - 所以我认为一定是选择器问题？
非常好。谢谢。我已经把你的小提琴分叉了，让它“全天候”循环。看看：jsfiddle.net/lazurski/LQ58L/2

【解决方案3】：

我在 jsfiddle 上设置了一个示例：http://jsfiddle.net/prMm2/1/

基本上，你只需要找到当前选中的元素，去掉它的选中状态，然后在下一个/上一个添加selected="selected"。

【讨论】：