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

Question

我打算实现一个 select选择器，它允许用户从下拉列表中选择多个选项。问题是，当我的后端从这个 selectpicker 中提取值时，这些值必须按用户 selection 的顺序排列，而不是原始下拉列表的顺序。希望能得到一些帮助！提前致谢！

我正在用 django（前端）和 Flask（后端）开发这个

计划用我的 DataFrame

中的值填充 select 选择器

假设 select 选择器中的选项顺序如下所示：

一个
B
C
D

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

从此select选择器元素提取期望值：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>

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

How can I reorder the selection of selectpicker based on my user selection?

javascript

jquery

dataframe

flask

bootstrap-selectpicker