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

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
        }
  ?>