jQuery循环上下选择列表值

问题描述：

这应该是非常简单的jQuery，但我不能得到它的工作！似乎无法找到任何搜索...jQuery循环上下选择列表值

我有一个选择列表，我想用它旁边的+和 - 按钮（如数量框）循环访问列表值，所以用户不会需要点击下拉，滚动并选择。

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

有点样本脚本将是美好的。

答

鉴于以下<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

谢谢！这是伟大的，它显示了我的问题的基础... – Paul 2011-06-08 20:58:38

我正在使用jqtransform风格的形式，并与此打开的事件不会发生 - 所以我认为必须是选择器的问题？ – Paul 2011-06-08 20:59:39

非常好。谢谢。我已经把你的小提琴拨开了，让它“昼夜不停地”循环。检查出来：http://jsfiddle.net/lazurski/LQ58L/2/ – 2013-07-07 15:58:13

答

当单击后退按钮，执行这样的事情：

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

答

我已经建立上的jsfiddle一个例子：http://jsfiddle.net/prMm2/1/

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

jQuery循环上下选择列表值

相关推荐