如何排列所选选项取决于用户选择

How to arrange the selected options depends on user selection?

本文关键字：选项取决于用户选择何排列排列更新时间：2023-09-26

有谁知道如何根据用户选择来排列所选选项？例如，用户选择了选项 3、1、4 和 2？

 var selected_id = [];
        $(document).on('click','.clickable',function(e){
          if(selected_id.length>=1 ){
            selected_id=[];
          }
        $(this).parent().find(":selected").each(function(){
          selected_id.push($(this).attr('id'));
        });
        console.log(selected_id);
        }).get().join(", "); 
        $("#gen-btn").click(function(){
            event.preventDefault();
             $.ajax({
                url: "<?php echo base_url('reports/generate_imported'); ?>",
                data: {selected_id: selected_id},
                type: "POST",
                success: function(result){
                    alert(result);
                }
            }); 

            return false; 
         });

这是我的视图页面

     <select class="form-control reports" name="cols[]" multiple="multiple" id="cols[]" required="required">
                    <option id="1" class="clickable" value="1">item 1</option>
                    <option id="2" class="clickable" value="2">item 2</option>
                    <option id="3" class="clickable" value="3">item 3</option>
                    <option id="4" class="clickable" value="4">item 4</option></select>

代码：链接示例

var selected_id = [];
var selected_ord=[];
            $(document).on('click','.clickable',function(e){
              var ops= $(this).parent().find(":selected").length;
             if($(e.target).is(':selected')){

             selected_ord.push($(e.target).attr('id'));
     selected_id=selected_ord.slice(selected_ord.length-ops, selected_ord.length);          
             }

         else {
               var toRemove=selected_ord.lastIndexOf($(e.target).attr('id'));
             selected_ord.splice(toRemove ,1);
           var index = selected_id.indexOf($(e.target).attr('id'));  
           selected_id.splice(index, 1);
         } 
              console.log(selected_id); 

            }).get().join(", "); 
            $("#gen-btn").click(function(){
                event.preventDefault();
                 $.ajax({
                    url: "<?php echo base_url('reports/generate_imported'); ?>",
                    data: {selected_id: selected_id},
                    type: "POST",
                    success: function(result){
                        alert(result);
                    }
                });    

                return false; 
             });
             $("#gen-btn").click(function(){
                selected_id.length = 0;
             });