Question

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

我正在使用Django（前端）和Flask（后端）进行开发

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

让我们说一下选择选择器中的选项顺序如下：

A
B
C
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>

Answer 2

感谢您的解决方案。但是，我不确定如何修改对bootstrap等的引用以匹配您的引用。以下列表是我的参考文献，您能否建议我如何修改参考文献？谢谢！

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

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

2 个答案: