jquery multiselect selected data order

前端未结

关注

 4  512

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

相关标签:

4条回答

清酒与你

2020-12-20 22:22

This is working for me:

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

0 讨论(0)

野趣味

2020-12-20 22:24
This code reorders the selected options in the multiselect in the order that they are shown in the plugin. They will be in the right order when submitted.
```
afterSelect: function(value){
        $('#countries option[value="'+value+'"]').remove();
        $('#countries').append($("<option></option>").attr("value",value).attr('selected', 'selected'));
      },
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
佛祖请我去吃肉

2020-12-20 22:25
your script for handling deselections lacks removal of the comma if necessary and it fails if an item value partially matches another item's value (not in this example as the identifier is unique).

I solved it the following way: 1.) in jquery.multi-select.js line 111 add the following snippet:
```
ref="' + that.escapeHTML($option.val()) + '"
```
to
```
var selectableLi = $('<li '+attributes+' ref="' + that.escapeHTML($option.val()) + '"><span>'+that.escapeHTML($option.text())+'</span></li>'),
```
That forces the selectable and selected list to adpot the values of the option element.

2.) In your script you have to add the following function
```
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
});
```
The function will generate a clean string of the selected options every time the items have changed while keeping the order of the elements. It searches for all list items in the selection list that are visible / selected, puts them into an array and finally converts / joins them to a comma separated string which is beeing inserted to the hidden input field.
0 讨论(0)
发布评论:

提交评论
- 加载中...

感动是毒

2020-12-20 22:34

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

0 讨论(0)