如何使用javascript保留多選的順序？

Question

假設我想要選擇多個選項並保留選擇的順序。例如，請參閱jsfiddle。

如果我選擇Wyoming和THENAmalapuram，我想要的結果是["WY","Am"]，其中WY是Am過，但是沒有["An","WY"]。

這可能嗎？多謝你們。

這裏是我的HTML代碼，

<select multiple id="e1" style="width:300px"> 
     <option value="AL">Alabama</option> 
     <option value="Am">Amalapuram</option> 
     <option value="An">Anakapalli</option> 
     <option value="Ak">Akkayapalem</option> 
     <option value="WY">Wyoming</option> 
    </select> 
<input type="checkbox" id="checkbox" >Select All 

<input type="button" id="button" value="check Selected"> 

和js代碼，

$("#e1").select2(); 
$("#checkbox").click(function(){ 
    if($("#checkbox").is(':checked')){ 
     $("#e1 > option").prop("selected","selected"); 
     $("#e1").trigger("change"); 
    }else{ 
     $("#e1 > option").removeAttr("selected"); 
     $("#e1").trigger("change"); 
    } 
}); 

$("#button").click(function(){ 
     alert($("#e1").val()); 
}); 

Answer 1

我能想到的一個非常漫長而枯燥這樣的方式：訂閱改變事件上選擇2 ，並且自己跟蹤選定的值。

下面是更新小提琴：http://jsfiddle.net/Nisarg0/agfs8m3d/2/

var e1Values = []; 

$("#e1").select2().on('change', function(e){ 
    console.log(e, e.val); 

    if(e1Values.length < e.val.length) { 
    // Add the value when a new item is selected. 
    e.val.forEach(function(item, index){ 
     if(e1Values.indexOf(item) == -1) { 
     e1Values.push(item); 
     } 
    }); 
    } else { 
    // Remove the value when an item is deselected. 
    e1Values.forEach(function(item, index){ 
     if(e.val.indexOf(item) == -1) { 
     e1Values.splice(index, 1); 
     } 
    }); 
    } 

    console.log("Current value: ", e1Values); 
});