php - 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'));
      },