Question

我在此页http://loudev.com/中使用了jquery multiselct。它运行良好，但现在系统要求需要这个多选项按照已选择的顺序过去数据。

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

enter image description here

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

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

这是插件生成的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>

非常感谢您的帮助。

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。）每当选择改变时执行selectionToString函数：

$("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>

jquery multlectlect选择的数据顺序

4 个答案: