php - jquery 多选选中的数据顺序

Question

我正在使用来自此页面的 jquery multiselct http://loudev.com/ .它运行良好，但现在系统要求需要此多选以按已选择的顺序传递数据。

显示没有问题，因为数据是按照选择排列的，但是提交表单时，选择数据的顺序和选择框的顺序是一样的。

这是基于上图的工作原理:-

我在下拉框中选择了巴西、法国和澳大利亚，按照选择的先后顺序排列。发送此表格后，我将收到数据，显示顺序应为巴西、法国和澳大利亚，但收到的数据与选择框的顺序相同，为法国、澳大利亚和巴西。

这里是插件生成的html代码，仅供展示，提交时会超过原来隐藏的选项值。如果用户点击....，它只会将“selected”设置为原始选项中的选择。

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

非常感谢您的帮助。

Answer 1

此代码按照插件中显示的顺序重新排列多选中的选定选项。它们将在提交时以正确的顺序排列。

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