多選與jQuery和可選

Question

我有可選擇的多選jQuery上的問題。

我確實知道發生了什麼。

拼接項目時，他們得到新的索引。這是我認爲的問題。但我似乎無法找到解決方案。

非常感謝您的幫助！

我在這裏創造低於這個JSFiddle

是一樣的jsfiddle。但是這下面不起作用。我不明白爲什麼。我必須粘貼下面的代碼才能發佈。

雖然JSFiddle可以工作。所以檢查一下。

var arrSelectedItems = []; 
 
var arrItems = []; 
 

 

 
$("#showItems").click(function() { 
 
    arrItems.push([1, "Mr", "John", "Andersson"]); 
 
    arrItems.push([2, "Mrs", "Anna", "Svensson"]); 
 
    arrItems.push([3, "Mr", "Klas", "Olsson"]); 
 
    arrItems.push([4, "Mrs", "Lovisa", "Henriksson"]); 
 
    arrItems.push([5, "Mr", "Anders", "Annikadotter"]); 
 
    arrItems.push([6, "Mrs", "Klara", "Annasson"]); 
 
    showItems(); 
 
}); 
 

 
function showItems() { 
 
    $('#selectable').empty(); 
 
    $(arrItems).each(function(i) { 
 
    var stringItems = arrItems[i].toString().split(","); 
 
    $('#selectable').append("<li class=\"ui-widget-content\" value='" + i + "'>" + stringItems[1] + " &nbsp; " + stringItems[2] + " " + stringItems[3] + "</li>").attr("class", "ui-widget-content"); 
 
    }); 
 
} 
 

 
function showSelectedItems() { 
 
    $('#selected').empty(); 
 
    $(arrSelectedItems).each(function(i) { 
 
    var stringItem = arrSelectedItems[i].toString().split(","); 
 
    $('#selected').append("<li class=\"ui-widget-content\" value='" + i + "'>" + stringItem[2] + " &nbsp; " + stringItem[3] + " " + stringItem[1] + "</li>"); 
 
    }); 
 
} 
 

 
$(function() { 
 
    $("#selectable").selectable({ 
 
    stop: function() { 
 
     $(".ui-selected", this).each(function() { 
 
     var $this = $(this); 
 
     var index = $this.attr("value"); 
 
     var pushString = arrItems[index]; 
 
     arrSelectedItems.push(pushString); 
 
     arrSelectedItems.sort(); 
 
     arrItems.splice(index, 1); 
 
     arrItems.sort(); 
 
     showItems(); 
 
     showSelectedItems(); 
 
     }); 
 
    } 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $("#selected").selectable({ 
 
    stop: function() { 
 
     $(".ui-selected", this).each(function() { 
 
     var $this = $(this); 
 
     var index = $this.attr("value"); 
 
     var pushString = arrSelectedItems[index]; 
 
     arrItems.push(pushString); 
 
     arrItems.sort(); 
 
     arrSelectedItems.splice(index, 1); 
 
     arrSelectedItems.sort(); 
 
     showItems(); 
 
     showSelectedItems(); 
 
     }); 
 

 
    } 
 
    }); 
 
});

#selectable .ui-selecting { 
 
    background: #FECA40; 
 
} 
 

 
#selectable .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 

 
#selectable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 

 
#selectable li { 
 
    margin: 3px; 
 
    padding: 0.4em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
} 
 

 
#selected .ui-selecting { 
 
    background: #FECA40; 
 
} 
 

 
#selected .ui-selected { 
 
    background: #F39814; 
 
    color: white; 
 
} 
 

 
#selected { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 

 
#selected li { 
 
    margin: 3px; 
 
    padding: 0.4em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
 

 
<input type="button" id="showItems" name="showItems" value="Show items"> 
 
<ol id="selectable" class="ui-selectable" style="background:#84ac38; border: 1px solid #267501;"> 
 
</ol> 
 
<ol id="selected" class="ui-widget-content" style="background:#e9b91c ;border: 1px solid #ce7b12;> 
 
\t \t \t 
 
\t \t </ol>

Answer 1

所以我現在明白了什麼問題。拼接數組時，下一個索引會被刪除。因此，每個功能在拼接時不起作用。

然後我試圖做每個向後，每個功能不會干涉接下來被拼接。我發現這個超級漂亮和乾淨靈魂。 https://stackoverflow.com/a/5386150/2950384

添加這短短的jQuery插件代碼

jQuery.fn.reverse = [].reverse; 

，並使用反向這樣

stop: function() { 
      $(".ui-selected", this).reverse().each(function() { 
       var $this = $(this); 

現在多選作品。