单击向上或向下按钮时选择的jQuery SELECT输入更改选项答案

【问题标题】：jQuery SELECT input change option selected when clicking button up or down单击向上或向下按钮时选择的jQuery SELECT输入更改选项
【发布时间】：2012-10-10 23:41:49
【问题描述】：

<select id="edit-attributes-1">
      <option value="44" selected="selected">0</option>
      <option value="35">1</option>
      <option value="36">2</option>
      <option value="37">3</option>
</select>
<select id="edit-attributes-2">
      <option value="44" selected="selected">0</option>
      <option value="35">1</option>
      <option value="36">2</option>
      <option value="37">3</option>
</select>
<select id="edit-attributes-3">
      <option value="44" selected="selected">0</option>
      <option value="35">1</option>
      <option value="36">2</option>
      <option value="37">3</option>
</select>
<select id="edit-attributes-4">
      <option value="44" selected="selected">0</option>
      <option value="35">1</option>
      <option value="36">2</option>
      <option value="37">3</option>

</select>
    <select id="edit-attributes-9" name="attributes[9]" class="form-select">
      <option value="44" selected="selected">0</option>
      <option value="35">1</option>
      <option value="36">2</option>
      <option value="37">3</option>
    </select>

       <select id="edit-attributes-11" name="attributes[11]" class="form-select">
      <option value="45" selected="selected">0</option>
      <option value="39">1</option>
      <option value="41">2</option>

    </select>

//This Code adds <span>+</span> and <span>-</span> with their attributes
$('select[id^="edit-attributes-"][id!="edit-attributes-12"]').after(function() {
    var count = $(this).find('option').length;
    return '<span class="step stepup step-' + this.id + '" id="step-up-' + this.id.substring(16) + '">+</span><span class="step stepdown step-' + this.id + '" id="step-down-' + this.id.substring(16) + '">-</span>';

});

//This code detects reacts when + or - is clicked.
$('span[id^="step-"]').click(function() {
    //Tokenized class name into array <span class="step stepup step-edit-attributes-1" id="step-up-1">+</span> 
    var classList = $(this).attr('class').split(/\s+/); 
    //Use for Option Index = 0 ofcourse
    var min = 0;
    //Use for Option Index Max = number of options in particular Select
    var max = $("#" + classList[2].substring(5) + " option").length;
    //Index of selected Option
    var selected = $("#" + classList[2].substring(5) + " option:selected").index();
    //Value of Selected Option
    var value = $("#" + classList[2].substring(5) + " option:selected").val();

    //since id is "step-up-ID" just want to get the UP or DOWN
    var op = this.id.split("-");


    if (op[1] == "up") { // second token of op = up or down

        if (value < max) {
            value++;
            alert(selected + ":" + value + " : " + op[1]);            
            //remove any selected option ??????
//MY PROBLEM IS HERE WHEN I TRY TO REMOVE EXISTING SELECTED AND SELECT A NEW OPTION AFTER THE SELECTED ONE**

            $("#" + classList[2].substring(5) + " option:selected").removeAttr("selected");
            //assign new selected option ???????
            $("#" + classList[2].substring(5) + " option").selectedIndex=value;
        }
    }
    if (op[1] == "down") {
        if (value > min) {            
            value--;
            alert(selected + ":" + value + " : " + op[1]);
//MY PROBLEM IS HERE WHEN I TRY TO REMOVE EXISTING SELECTED AND SELECT A NEW OPTION BEFORE THE SELECTED ONE**
            $("#" + classList[2].substring(5) + " option:selected").removeAttr("selected");
            $("#" + classList[2].substring(5) + " option").selectedIndex=value;
        }

    }
});

当我点击 (-) 时，我的目标就在这里，它将更改选择的上一级，然后 (+) 选择下一级的新选项。有人可以帮忙并优化此代码。我已经尝试在这上面游泳好几个小时了。

【问题讨论】：

标签： jquery html select spinner option

【解决方案1】：

您正在为+ 和- 动态生成HTML，对吗？那么你应该使用on 而不是click：

http://api.jquery.com/on/

selects 是否有共同的父 div？

如果是这样，请将您的代码更改为：

$("#parentDiv").on("click", 'span[id^="step-"]', function() {....});

【讨论】：

已经处理了 + 的生成，但是当点击生成的 + 时点击...对不起，我不知道如何点击事件，你可以调整我的代码吗所以我可以很好地理解..
jsfiddle.net/qjVHM/12

【解决方案2】：

这是脚本的工作版本 + 优化。

//This code detects reacts when + or - is clicked.
$('span[id^="step-"]').click(function() {
    //Tokenized class name into array <span class="step stepup step-edit-attributes-1" id="step-up-1">+</span> 
    var classList = $(this).attr('class').split(/\s+/),
        item      = $('#'+classList[2].substring(5)),
        selected  = item[0].selectedIndex;

    //since id is "step-up-ID" just want to get the UP or DOWN
    var op = this.id.split("-");

    var index = (op[1] == 'up' ? 1 : -1) + selected;
    if (item.find('option')[index]) {
        item[0].selectedIndex = index;
    }    
});

http://jsfiddle.net/rezigned/qjVHM/15/

【讨论】：

jsfiddle.net/qjVHM/14

【解决方案3】：

尝试将事件委托给 span 的 prentStatic 容器..

$(document).on('click','span[id^="step-"]',function() {

如果您有任何包含此文档以外的静态容器，那么您可以使用该容器..

【讨论】：