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

Question

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

我正在使用 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/bootstrap-select@1.13.9/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/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker" id="myPicker" multiple>
  <option>TV</option>
  <option>Radio</option>
  <option>Newspaper</option>
</select>