Выбрано: сохраняйте несколько заказов на выбор

Ответ 1

Я написал простой плагин для использования вместе с Chosen. Он позволяет получить порядок выбора выделенного элемента множественного выбора, а также установить его из массива упорядоченных значений.

Он доступен на Github: https://github.com/tristanjahier/chosen-order

Он совместим с Chosen 1.0+ и с версиями jQuery и Prototype. Существует также плагин для каждого фреймворка, который позволяет вам делать такие вещи:

Получить порядок выбора

var selection = $('#my-list').getSelectionOrder();

Задайте выбранные значения в порядке

var order = ['nioup', 'plop', 'fianle']; // Ordered options values
$('#my-list').setSelectionOrder(order);

Проверьте это.

Ответ 2

Я предлагаю вам использовать Select2, если еще не слишком поздно. Он выглядит так же, как и Chosen, но имеет лучший API и документы.

С select2 это будет что-то вроде [непроверенного кода]

 var results = [];
 $("#e11").on("change", function(e) { 
    results.push(e.val)
 })

Ответ 3

Теперь доступен доступный плагин https://github.com/mrhenry/jquery-chosen-sortable/, который выполняет задание для выбранного v1.

Для новых версий выбранных вам нужно заменить chzn- на выбранный в файле github JS.

Чтобы использовать, я использую следующий код:

jQuery('#myselect').addClass('chosen-sortable').chosenSortable();

Он работает очень хорошо, но вам понадобится еще один код при редактировании поля для повторного упорядочивания элементов после загрузки.

Я использую для этого следующее. Учитывая список sortedElements и $select = jQuery ('# myselect'):

var $container = $select.siblings('.chosen-container')
var $list = $container.find('.chosen-choices');

// Reverse the list, as we want to prepend our elements.
var sortedElements = sortedElements.reverse();

for (var i = 0; i < sortedElements.length; i++) {
  var value = sortedElements[i];

  // Find the index of the element.
  var index = $select.find('option[value="' + value + '"]').index();

  // Sort the item first.
  $list
          .find('a.search-choice-close[data-option-array-index="' + index + '"]')
          .parent()
          .remove()
          .prependTo($list);
}

Здесь очень хорошо работает.

Ответ 4

Я применил специальный обработчик события .change(), чтобы он работал:

$('.chosen-select').chosen({});

в

$('.chosen-select').chosen({}).change((event, info) => {
  if (info.selected) {
    var allSelected = this.querySelectorAll('option[selected]');
    var lastSelected = allSelected[allSelected.length - 1];
    var selected = this.querySelector(`option[value="${info.selected}"]`);
    selected.setAttribute('selected', '');
    lastSelected.insertAdjacentElement('afterEnd', selected);
  } else { // info.deselected
    var removed = this.querySelector(`option[value="${info.deselected}"]`);
    removed.setAttribute('selected', false); // this step is required for Edge
    removed.removeAttribute('selected');
  }
  $(this).trigger("chosen:updated");
});

Обратите внимание, что это перемещает DOM в случае выбора и без движения в случае отмены выбора. setAttribute/removeAttribute должен вызвать видимое изменение в <option> DOM.

Надеюсь, что эта помощь поможет кому-то еще найти способ сделать это, не делая ничего лишнего при отправке.

PS: компактная версия jQuery этого кода может быть написана при необходимости.:)

Ответ 5

Надеюсь, это полезно для людей, которые используют более старую версию select2 (меньше, чем v4). select2-select и select2-remove варианты полезны в этом случае. Используя массив и добавляя значения, как только мы выберем, мы можем поддерживать порядок выбора и при отмене выбора конкретного параметра мы можем найти индекс и удалить его из массива с помощью splice().

var selected = [];    
$('#multiSelect').on("select2-selecting", function(evt) {
            var selectedOption = evt.val;
            selected.push(selectedOption);

        }).on("select2-removing", function(evt) {
              index = selected.indexOf(evt.val);
              selected.splice(index,1);       
        });   

Для версии 4 и выше можно выбрать select2: select и select2: unselect.:)

Ответ 6

Вы можете добавлять/удалять элементы самостоятельно при изменении события.

// Your collection Array
var collectionArray = [] 

// make change event on chosen select field
chosenSelect.change(function () {
  // first get the chosen results which might be in wrong order
  var currentValues = $(this).val();

  // get your current collection that is in the right order
  var pastValues = collectionArray;

  // see if you need to add or drop
  if (currentValues.length > pastValue.length) {

    // loop to get just the new item
    pastValues.forEach(function(pastValue) {
      currentValue = $.grep(currentValue, function(newItemOnly) {
        return newItemOnly != pastValue;
      });
    });

    // add your newItemOnly
    collectionArray.push(currentValue[0]);

  } else {

    // here loop to get only the dropped value
    currentValues.forEach(function(currentValue) {
      pastValues = $.grep(pastValues, function(droppedValueOnly) {
        return droppedValueOnly != currentValue;
      });
    });

    // drop the value dropped from your collection
    collectionArray = $.grep(collectionArray, function(updatedArray) {
      return updatedArray != pastValues[0];
    });
  }
});

Ответ 7

Это будет организовано в порядке вашего выбора

$("select").on('select2:select', function (e) {
    var elm = e.params.data.element;
    $elm = jQuery(elm);
    $t = jQuery(this);
    $t.append($elm);
    $t.trigger('change.select2');
});