jquery - multiple - Elegido: mantener orden de selección múltiple

chosen updated

Question

Estoy usando la selección múltiple de Chosen Quiero poder seguir el orden seleccionado por el usuario. Por ejemplo, si un usuario selecciona option2 primero y luego option1, quiero obtener el resultado en el orden de option2 y option1. Pero el elegido ordena las opciones seleccionadas por el usuario. ¿Hay alguna manera en que pueda decir que elegí no clasificar el resultado?

Answer 1

Escribí un plugin simple para usar junto con Chosen. Le permite recuperar el orden de selección de un elemento de selección múltiple elegido y también establecerlo a partir de una matriz de valores ordenados .

Está disponible en Github: https://github.com/tristanjahier/chosen-order

Es compatible con Chosen 1.0+ y con las versiones jQuery y Prototype. También hay un complemento para cada marco, que te permite hacer cosas como esta:

Recuperar el orden de selección

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

Establecer los valores seleccionados en orden.

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

Echale un vistazo.

Answer 2

Espero que esto sea útil para las personas que usan la versión anterior de select2 (menos que v4). Las opciones select2-selection y select2-remove son útiles en este caso. Usando una matriz y agregando los valores una vez que seleccionamos, podemos mantener el orden de selección y, al deseleccionar una opción en particular, podemos encontrar el índice y eliminarlo de la matriz mediante 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);
});

Para la versión 4 y superior, select2: select y select2: unselect se puede usar. :)

Answer 3

Esto se ordenará por orden de su selección.

$("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'');
});

Answer 4

Hay un https://github.com/mrhenry/jquery-chosen-sortable/ plugin ahora disponible, que hace el trabajo para v1 elegido.

Para versiones más nuevas de elegido, debe reemplazar chzn- con elegido- en el archivo github JS.

Para usarlo, uso el siguiente código:

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

Funciona muy bien, pero necesitará algo más de código, cuando vuelva a editar el campo para reordenar los elementos después de que se haya cargado el elegido.

Yo uso lo siguiente para esto. Dada una lista de elementos ordenados y $ 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);
}

Esto funciona muy bien aquí.

Answer 5

Le sugiero que utilice Select2 si no es demasiado tarde. Se ve igual que Elegido, pero tiene una mejor forma de API y documentos.

Con select2, sería algo así como [código no probado]

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

Answer 6

.change() controlador de eventos .change() personalizado para hacer que funcione:

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

a:

$(''.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");
});

Tenga en cuenta que esto mueve el DOM en caso de selección y ningún movimiento en caso de deselección. El setAttribute / removeAttribute es para producir un cambio visible en <option> DOM.

Espero que esto ayude a alguien que todavía esté buscando una manera de hacerlo sin hacer nada extra en el envío.

PD: la versión jQuery compacta de este código se puede escribir si es necesario. :)