jQuery选择框增加值，仅目标下一个选择

Question

I have a simple script that increases and decreases the selected values of a select box:

$(".inc").click(function(){
    $("select option:selected").next().prop("selected", true);
});
$(".dec").click(function(){
    $("select option:selected").prev().prop("selected", true);
});

However, I have 20 selects in one form, and dont want to have to repeat the script with new #ids to only associate the script with the next select box (eg select#1, sesect#2 ....)

At present, when the user clicks inc or dec on any select box, ALL select values in the form are updated, not just one.

Anyone know how to target only the next, immediate select box when the script is executed?

Thanks!

Answer 1

Where is .inc in relation to the select menu? Is there 20 inc's as well as 20 select menus?

If the structure is:

<div class="inc">increment</div>
<select><option></option><option></option></select>

You should be able to use

$(".inc").click(function(){
$(this).next('select > option:selected').next().prop("selected", true);
});

Updated: Note that use of .next() depends on your HTML structure. Using siblings() is properly better. See here for an example: http://jsfiddle.net/JZJZh/