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

Question

我正在使用来自此页面http://loudev.com/的 jquery multiselct 。它工作得很好，但现在系统要求需要这个多选来按已选择的顺序过去数据。

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

这是它基于上图的工作方式：-

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

这是插件生成的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'));
      },

Answer 2

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

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

如果需要，您用于处理取消选择的脚本缺少逗号的删除，并且如果项目值部分匹配另一个项目的值（在此示例中不是，因为标识符是唯一的），它会失败。

我通过以下方式解决了它：1.）在 jquery.multi-select.js 第 111 行添加以下代码段：

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

至

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

这会强制可选和选定列表采用选项元素的值。

2.）在您的脚本中，您必须添加以下功能

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
});

每次项目发生变化时，该函数都会生成一个干净的选定选项字符串，同时保持元素的顺序。它在选择列表中搜索所有可见/选定的列表项，将它们放入一个数组中，最后将它们转换/连接为一个逗号分隔的字符串，该字符串被插入到隐藏的输入字段中。

Answer 4

这对我有用：

<!DOCTYPE html>
<!-- saved from url=(0026)http://jsfiddle.net/m/amt/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>  
<script type="text/javascript" src="https://rawgit.com/lou/multi-select/master/js/jquery.multi-select.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/lou/multi-select/master/css/multi-select.css">   
<script>   

$(document).ready(function(){
        // $('#public-methods').multiSelect();


        $('#public-methods').multiSelect({
          afterSelect: function(values){

            var get_val = ""+$("#multiple_value").val();
            //var hidden_val = (get_val != "") ? get_val+"," : get_val;
            var hidden_val = get_val+","+values;
            $("#multiple_value").val(hidden_val);
            //$("#multiple_value").val(hidden_val+""+value);             
            //alert("Selecting value: "+values);            
            alert ( "HIDDEN value: "+ hidden_val) ;

          },
          afterDeselect: function(values){

            alert("Deselect value: "+values);           
            var get_val = $("#multiple_value").val();
            var new_val = get_val.replace(","+values, "");
            $("#multiple_value").val(new_val);
            alert("HIDDEN value after deselecting: "+new_val);
          }
        }); 

        $('#select-all').click(function(){
          $('#public-methods').multiSelect('select_all');
          return false;
        });
        $('#deselect-all').click(function(){
          $('#public-methods').multiSelect('deselect_all');
          $("#multiple_value").val("");
          //alert ("HERE");
          return false;
        });     

         $('#public-methods').multiSelect('addOption', { value: 't9', text: 'test9 (s3838)', index: 0  });
         $('#public-methods').multiSelect('addOption', { value: 't1', text: 'test1', index: 1  });
         $('#public-methods').multiSelect('addOption', { value: 't10', text: 'test10'  });       
         $('#public-methods').multiSelect('addOption', { value: '22', text: 'test2'  });         
         $('#public-methods').multiSelect('addOption', { value: '33', text: 'test3'  });         
         $('#public-methods').multiSelect('addOption', { value: '2222', text: 'test22'  });         

});
</script>    

 </head>
<body>

    <form action="demo_updated.html" method="get" id = "myForm">        

    <a href='#' id='select-all'>select all</a>
    <a href='#' id='deselect-all'>deselect all</a>       

    <select id="public-methods" multiple="multiple"  >
        <option value="elem1">Elem 1</option>
        <option value="elem2">Elem 2</option>
        <option value="elem3">Elem 3</option>
        <option value="elem4">Elem 4</option>
        <option value="elem5">Elem 5</option>
        <option value="elem6">Elem 6</option>
        <option value="elem7">Elem 7</option>
    </select>     

 <input type="hidden" name="multiple_value" id="multiple_value"  />
 <input type="submit" value="Submit" >
</form>

</body>
</html>