多选 Jquery 插件问题答案

【问题标题】：Multiselect Jquery plugin issue多选 Jquery 插件问题
【发布时间】：2018-07-05 09:20:53
【问题描述】：

我正在使用选择的 jquery 库。选择的值存储在一个数组中，然后稍后再次加载。加载的值是正确的，但选择的顺序不正确。
例如，如果我选择option3，然后选择option2，则重新加载时顺序为option2，option3。
html:

<select id="second" data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">    
     <option value=""></option> 
     <option value="United States">United States</option>
     <option value="United Kingdom">United Kingdom</option> 
     <option value="Afghanistan">Afghanistan</option> 
     <option value="Albania">Albania</option> 
     <option value="Algeria">Algeria</option> 
     <option value="American Samoa">American Samoa</option> 
     <option value="Andorra">Andorra</option> 
     <option value="Angola">Angola</option> 
     <option value="Anguilla">Anguilla</option>
</select>

JavaScript：

$(".chosen-select").chosen();
var selectedOptions = [];
$('button').click(function(){
    //$(".chosen-select").val('').trigger("chosen:updated");
  $('#second_chosen ul li span').each(function(i, selected){
      selectedOptions[i] = $(selected).text();
  });
  //clear the selection
  $("#second").val("").trigger("chosen:updated");

});

$('#previousBtn').click(function(){
    console.log(selectedOptions);
    $("#second").val(selectedOptions).trigger("chosen:updated");
});

selectedOptions 数组中的选择顺序是正确的，但它显示的是选项的顺序，而不是选择的顺序。
请找到 jsfiddle：https://jsfiddle.net/Da4m3/1051/。
知道如何解决这个问题吗？

【问题讨论】：

如果问题是在保存所选列表后出现的，那么您已经检查了保存结果的顺序。
在console.log中，它的顺序是正确的，所以现在必须检查选择框。
但你为什么使用previous按钮？
我认为 OP，错误地写成 Previous 代替 Preview.
选择字段（无论是原生字段还是替代字段）的工作都不是实现任何“顺序”的选择……

标签： javascript jquery html

【解决方案1】：

看看下面的链接是否有帮助。

Chosen: Keep Multiple Selection Order

https://github.com/tristanjahier/chosen-order

有一个插件可以满足您的要求。

【讨论】：

【解决方案2】：

我使用 push() 函数将值添加到 selectedOptions 数组

$('#second_chosen ul li span').each(function(i, selected){
    selectedOptions.push($(selected).text());
});

https://jsfiddle.net/Da4m3/1096/

【讨论】：

【解决方案3】：

关键是，数组中的条目在选择中的显示顺序不同

【讨论】：