Javascript 如何安排所选选项取决于用户选择？

是否有人知道如何根据用户选择排列所选选项？例如，用户选择了选项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; 

         });

var selected_id=[]；
$（文档）.on（'click'，'clickable'，函数（e）{
如果（所选id.length>=1）{
选定的_id=[]；
}
$（this）.parent（）.find（“：selected”）.each（function（））{
选定的_id.push（$（this.attr（'id'））；
});
console.log（选择的\u id）；
}).get（）.join（“，”）；
$（“#gen btn”）。单击（函数（）{
event.preventDefault（）；
$.ajax({
url:“”，
数据：{selected_id:selected_id}，
类型：“POST”，
成功：功能（结果）{
警报（结果）；
}
}); 
返回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>

项目1
项目2
项目3
项目4

代码：

var selected_id=[]；
所选变量_ord=[]；
$（文档）.on（'click'，'clickable'，函数（e）{
var ops=$（this.parent（）.find（“：selected”）.length；
如果（$（e.target）.is（':selected'））{
选定的命令推送（$（e.target.attr（'id'））；
所选订单id=所选订单切片（所选订单长度-ops，所选订单长度）；
}
否则{
var toRemove=selected_ord.lastIndexOf（$（e.target.attr（'id'））；
选定的顺序拼接（toRemove，1）；
var index=选定的_id.indexOf（$（e.target）.attr（'id'）；
选定的拼接id（索引，1）；
} 
console.log（选择的\u id）；
}).get（）.join（“，”）；
$（“#gen btn”）。单击（函数（）{
event.preventDefault（）；
$.ajax({
url:“”，
数据：{selected_id:selected_id}，
类型：“POST”，
成功：功能（结果）{
警报（结果）；
}
});    
返回false；
});
$（“#gen btn”）。单击（函数（）{
所选_id.length=0；
});

@En E有人可能会发现它在这里很有用

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