Как я могу изменить порядок выбора selectpicker на основе моего выбора пользователя? - PullRequest
Новая
       37

Как я могу изменить порядок выбора selectpicker на основе моего выбора пользователя?

0 голосов
/ 23 мая 2019

Я планирую реализовать селектор выбора, который позволит пользователю выбрать несколько вариантов из выпадающего списка.Суть в том, что когда мой бэкэнд извлекает значения из этого средства выбора, значения должны быть в последовательности выбора пользователя, а не в порядке исходного выпадающего списка.Надеюсь получить помощь по этому вопросу!Заранее большое спасибо!

Я разрабатываю это с помощью django (Frontend) и Flask (backend)

Планирование заполнения селектора выбора значениями из моего DataFrame

Пусть скажемпоследовательность параметров в селекторе выбора выглядит следующим образом:

  1. A
  2. B
  3. C
  4. D

Таким образом, когда пользователь выбирает параметры в следующей последовательности, D, A, C

Ожидаемое извлечение значения из этого элемента выбора: D, A, C

Извлечение нежелательного значения из этого выбора seelctpickerэлемент: A, C, D

1 Ответ

3 голосов
/ 23 мая 2019

Это можно сделать, просто поместив выбранный элемент в массив строк. Вам просто нужно снова удалить его из массива, если пользователь решил отменить выбор этой опции. Метод array 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>
...