2

Tengo un <select> múltiple con Chosen y necesito pasar los datos de manera en como han sido seleccionados; pero al momento que los paso, me los pasa de la manera en la que están ordenados en el <option>.

Por ejemplo, selecciono los productos 2, Galletas, +, 4 y Rancheritos en ese orden:

Seleccion de Productos

Pero en la página que los recibo, me los muestra de esta manera (2, 4, Galletas, Rancheritos, +) y no de la manera en como yo los seleccioné:

En la pagina que los recibo me los muestra de esta manera y no de la manera en como yo los seleccione

¿Cómo puedo hacer que los datos se pasen en el orden seleccionado y no en el orden en el que se muestran en la select?

2 respuestas 2

2

La interfaz de selección múltiple no controla realmente el orden de selección.

Que tal, supongo que tienes un trigger para obtener la información, si es asi en esa funcion podrias usas algo como esto:

var elementsInOrder = [];
$(".chosen-container").find(".search-choice").each(function(index,el){
   elementsInOrder.push(el.textContent);
});

y ahi en el array tendrias los valores tal cual te aparecen en el multiSelect.

por otro lado si lo quieres hacer de otra manera encontre este plug-in que ayuda con eso:

tristanjahier/chosen-order

1
  • Muchas gracias, termine ocupando el plug-in! Commented el 20 mar. 2017 a las 23:14
2

Chosen es un plugin que facilita el uso de listas desplegables añadiendo funcionalidad y poniéndolas bonitas, pero que no afecta a cómo el navegador selecciona y manda la información, y por defecto la información de un multi-select se manda en el orden en el que está en la lista. Así que Chosen por sí solo no puede hacer lo que quieres.

...Pero existe un plugin de jQuery para el plugin Chosen (un plugin para un plugin) que permite que obtengas los resultados en orden. Se llama Chosen Order y lo puedes encontrar en GitHub. La idea entonces sería usar ese plugin para ordenar la información antes de que se envíe el formulario. Y entonces mandar la información ya ordenada mediante AJAX.

Aquí dejo un ejemplo de cómo podría hacerse:

$("#Productos").chosen();

$("#submit").on("click", function(e) {

  // evitamos que se envíe el formulario
  e.preventDefault();

  // obtenemos los parámetros y los ordenamos
  var serializedForm = $("form").serializeArray();
  var orderedValues = ChosenOrder.getSelectionOrder( $("#Productos") );
  
  console.log("ANTES DE ORDENAR SE ENVIARÍA:");
  console.log(JSON.stringify(serializedForm));
  
  // reordenamos el formulario serializado para que se ajuste al ordenado
  var x = 0;
  var y = 0;
  while (x < serializedForm.length) {
    if (serializedForm[x].name == "Productos[]") {
      serializedForm[x].value = orderedValues[y];
      y++;
    }
    x++;
  }
  
  console.log("DESPUÉS DE ORDENAR SE ENVÍA:");
  console.log(JSON.stringify(serializedForm));

  // enviamos el formulario usando AJAX
  $.ajax({
    url: "procesar.php",
    data: serializedForm
  });
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<script src="http://labo.tristan-jahier.fr/chosen_order/chosen.order.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">


<form method="GET" action="procesar.php">
  <select data-placeholder="Selecciona los productos..." style="width:350px;" multiple="" name="Productos[]" id="Productos">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="galletas">Galletas</option>
    <option value="rancheritos">Rancheritos</option>
    <option value="suavicremas">Suavicremas</option>
    <option value="tartinas">Tartinas</option>
    <option value="+">+</option>
    <option value="-">-</option>
  </select>
  <input type="submit" value="Enviar" id="submit" />
</form>

1
  • Muchas gracias funciono a la perfeccion!!!! Commented el 20 mar. 2017 a las 23:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.