javascript - 如何根据我的用户选择重新排序 selectpicker 的选择？

Question

我计划实现一个选择器，它将允许用户从下拉列表中选择多个选项。问题是，当我的后端从这个选择器中提取值时，这些值必须按照用户选择的顺序，而不是原始下拉列表的顺序。希望能得到一些帮助!预先非常感谢!

我正在使用 django(前端)和 Flask(后端)开发这个

计划使用我的 DataFrame 中的值填充选择器

假设选择器中的选项顺序如下:

1. 一个
2. B
3. C
4. D

因此，当用户按以下顺序选择选项时，D、A、C

从此选择器元素中提取预期值:D、A、C

从此 seelctpicker 元素中提取不需要的值:A、C、D

Answer 1

这可以通过简单地将选定的元素推送到字符串数组来完成。如果用户决定取消选择该选项，您只需确保再次将其从阵列中删除即可。数组 push() 方法将确保新选择的项目始终是最后一个元素，从而保持正确的顺序。

var myChoices = new Array();
$('#myPicker').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
  var selected = document.getElementById("myPicker").options[clickedIndex].value;
  if (myChoices.indexOf(selected) == -1) {
    myChoices.push(selected);
  } else {
    myChoices.splice(myChoices.indexOf(selected), 1);
  }
  console.log(myChoices);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d885dbcdc4cdcbdce89986999b8691" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594c9978188818790a4d5cad5d7cadd" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker" id="myPicker" multiple>
  <option>TV</option>
  <option>Radio</option>
  <option>Newspaper</option>
</select>