jquery multiselect selected data order

Question

I am using jquery multiselct from this page http://loudev.com/. It works well but now the system requirements need this multiselect to past the data in the order that have been selected.

No problem on the display because the data are arranged according to the selection made, but when the form is submitted, the order of the selected data is the same as the order of the selection box.

This is how it works base on image above:-

I have chosen Brazil, France and Australia from the drop-down box, it is arranged in the order of the choices made. After I send this form, I will receive the data should be Brazil, France and Australia as the order on the display but the data received is France, Australia and Brazil the same as the order of the selection box.

Here is the html code that plugin generated, this is for display only, when submit, it will past the original option value that have been hidden. It only set "selected" to the select in the original option if the user click on ....

<div id="ms-public-methods" class="ms-container">
  <div class="ms-selectable">
    <ul class="ms-list">
      <li class="ms-elem-selectable ms-selected" ms-value="fr" style="display: none; ">France</li>
      <li class="ms-elem-selectable" ms-value="uk">United Kingdom</li>
      <li class="ms-elem-selectable" ms-value="us">United States</li>
      <li class="ms-elem-selectable" ms-value="ch">China</li>
      <li class="ms-elem-selectable ms-selected" ms-value="au" style="display: none; ">Australia</li>
      <li class="ms-elem-selectable" ms-value="in">India</li>
      <li class="ms-elem-selectable" ms-value="ar">Argentina</li>
      <li class="ms-elem-selectable ms-selected" ms-value="br" style="display: none; ">Brazil</li>
      <li class="ms-elem-selectable" ms-value="tb">Tibet</li>
      <li class="ms-elem-selectable" ms-value="co">Columbia</li>
      <li class="ms-elem-selectable" ms-value="cr">Croatia</li>
      <li class="ms-elem-selectable" ms-value="it">Italia</li>
      <li class="ms-elem-selectable" ms-value="es">Espana</li>
      <li class="ms-elem-selectable" ms-value="id">Indonesia</li>
      <li class="ms-elem-selectable" ms-value="du">Germany</li>
      <li class="ms-elem-selectable" ms-value="no">Norway</li>
    </ul>
  </div>
 <div class="ms-selection">
   <ul class="ms-list">
     <li class="ms-elem-selected" ms-value="br">Brazil</li>
     <li class="ms-elem-selected" ms-value="fr">France</li>
     <li class="ms-elem-selected" ms-value="au">Australia</li>
   </ul>
  </div>
</div>

Your help is very much appreciated.

Answer 1

This code reorders the selected options in the multiselect in the order that they are shown in the plugin. They will be in the right order when submitted.

afterSelect: function(value){
        $('#countries option[value="'+value+'"]').remove();
        $('#countries').append($("<option></option>").attr("value",value).attr('selected', 'selected'));
      },

Answer 2

Heres what I got so far. I used the callback function of the plugin and store the values into the hidden field and convert that to array. When the value is deselected itll also be removed into the hidden input field. Ive tried this and it worked!

//sample form
<form method="post">
    <select multiple="multiple" id="countries" name="countries[]">
      <option value="fr">France</option>
      <option value="uk">United Kingdom</option>
      <option value="us">United States</option>
      <option value="ch">China</option>
    </select>
    <input type="hidden" name="multiple_value" id="multiple_value"  />
    <input type="submit" name="submit" value="Submit" />
</form>


//the jquery script with callback that sets the value into the hidden field
<script>
    $(function(){
        $('#countries').multiSelect({
          afterSelect: function(value, text){
            var get_val = $("#multiple_value").val();
            var hidden_val = (get_val != "") ? get_val+"," : get_val;
            $("#multiple_value").val(hidden_val+""+value);
          },
          afterDeselect: function(value, text){
            var get_val = $("#multiple_value").val();
            var new_val = get_val.replace(value, "");
            $("#multiple_value").val(new_val);
          }
        });
    });     
</script>

 //the PHP workaround
  <?php
        if(isset($_POST['submit'])){
            $hidden = $_POST['multiple_value']; //get the values from the hidden field
            $hidden_in_array = explode(",", $hidden); //convert the values into array
            $filter_array = array_filter($hidden_in_array); //remove empty index 
            $reset_keys = array_values($filter_array); //reset the array key 
            var_dump($reset_keys); //the result
        }
  ?>

Answer 3

your script for handling deselections lacks removal of the comma if necessary and it fails if an item value partially matches another item's value (not in this example as the identifier is unique).

I solved it the following way: 1.) in jquery.multi-select.js line 111 add the following snippet:

ref="' + that.escapeHTML($option.val()) + '"

to

var selectableLi = $('<li '+attributes+' ref="' + that.escapeHTML($option.val()) + '"><span>'+that.escapeHTML($option.text())+'</span></li>'),

That forces the selectable and selected list to adpot the values of the option element.

2.) In your script you have to add the following function

function selectionToString() {
    var valueString = [];
    $("your-select-list-identifier").next().find('div.ms-selection li.ms-selected')
    .each(function() {
        valueString.push($(this).attr("ref"))
    });
    $("your-hidden-input-element").val(valueString.join(','));
}

3.) execute the selectionToString function whenever the selection changes:

$("your-select-list-identifier").multiSelect({
    keepOrder: true,
    afterSelect: selectionToString,
    afterDeselect: selectionToString
});

The function will generate a clean string of the selected options every time the items have changed while keeping the order of the elements. It searches for all list items in the selection list that are visible / selected, puts them into an array and finally converts / joins them to a comma separated string which is beeing inserted to the hidden input field.