如何使用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); 
});