Data step of a multi-select in the selected order

Question

Data step of a multi-select in the selected order

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I have a% multiple% co with Chosen and I need to pass the data on how they have been selected; but the moment I pass them, it passes them to me in the way they are sorted in <select> .

For example, I select products 2, Cookies, +, 4 and Rancheritos in that order:

But on the page that I receive them, he shows them to me in this way (2, 4, Cookies, Rancheritos, +) and not in the way I selected them:

How can I make the data go through in the selected order and not in the order in which they are displayed in the <option> ?

jquery multichoice

asked by Memo Vara D. Gante 20.03.2017 в 05:24

source

2 answers

Change the style of a DIV when it is pressed Error when obtaining the value of a variable

score 2 · Answer 1

The multiple-selection interface does not really control the sort order.

How about, I guess you have a trigger to get the information, if so, in that function you could use something like this:

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

and there in the array you would have the values as they appear in the multiSelect.

On the other hand if you want to do it in another way I found this plug-in that helps with that:

tristanjahier / chosen-order

score 2 · Answer 2

Chosen is a plugin that facilitates the use of drop-down lists adding functionality and putting them nice, but that does not affect how the browser selects and sends the information, and by default the information of a multi-select is sent in the order in the one on the list. So Chosen alone can not do what you want.

... But there is a jQuery plugin for the Chosen plugin (a plugin for a plugin) that allows you to get the results in order. It's called Chosen Order and you can find it on GitHub . The idea would then be to use that plugin to sort the information before the form is submitted. And then send the information already ordered by AJAX.

Here is an example of how it could be done:

$("#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>