Question

这应该是非常简单的jQuery但我不能让它工作！似乎无法在搜索中找到任何东西......

我有一个选择列表，我想在它旁边使用+和 - 按钮（比如数量框）来循环显示列表值，这样用户就不需要点击下拉菜单，滚动并选择。

实际上，我需要一个选择列表，使用'next'和'previous'按钮，只需在点击时触发jQuery并循环上下值。

一点点样本脚本会很精彩。

Answer 1

给出以下<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

Answer 2

单击上一个按钮时，执行以下操作：

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');
}

Answer 3

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

基本上，您只需要找到当前选中的元素，删除它的选定状态，然后将selected="selected"添加到下一个/前一个元素。

jQuery循环上下选择列表值

3 个答案: