php – jquery multiselect选择的数据顺序

发布时间：2020-12-13 13:52:08 所属栏目：PHP教程来源：网络整理

导读：我正在使用此页面 http://loudev.com/中的jquery multiselct.它运行良好但现在系统要求需要此多选项以按选择的顺序过去数据. 在显示器上没有问题,因为数据是根据所做的选择排列的,但是当提交表格时,所选数据的顺序与选择框的顺序相同. 这是基于上图的工作原

我正在使用此页面 http://loudev.com/中的jquery multiselct.它运行良好但现在系统要求需要此多选项以按选择的顺序过去数据.

在显示器上没有问题,因为数据是根据所做的选择排列的,但是当提交表格时,所选数据的顺序与选择框的顺序相同.

这是基于上图的工作原理： –

我从下拉框中选择了巴西,法国和澳大利亚,它按照选择的顺序排列.我发送此表后,我将收到的数据应该是巴西,法国和澳大利亚作为显示的订单,但收到的数据是法国,澳大利亚和巴西的选择框的顺序相同.

这是插件生成的html代码,这仅用于显示,在提交时,它将超过已隐藏的原始选项值.如果用户点击,它只将“选中”设置为原始选项中的选择….

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

非常感激你的帮助.

这是我到目前为止所得到的.我使用了插件的回调函数,并将值存储到隐藏字段中并将其转换为数组.当取消选择该值时,它也将被移除到隐藏的输入字段中.我试过这个,它工作了！

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!