用户取消选择，然后从数组中删除项目并进行排列，具体取决于它们的选择方式

user deselect, then remove item from array and arrange depends on how they were selected

本文关键字：选择 排列 取决于 方式 然后 取消 数组 用户 删除项目      更新时间：2023-09-26

如果用户从 select 元素更改其选择选项，如何删除数组中的项目？ 同时根据用户如何选择它们排列所选选项。 例如，它们被选为 3、1、4、2。

这是我在JavaScript中的代码

    <script>
            var selected_id = [];
            $(document).on('click','.clickable',function(e){
            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; 
             });
        </script>

这是我在视图中的代码页面

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

感谢@itsgoingdown，得到了我想要的从数组中删除项目的行为，但我希望它们按照选择方式排列。 例如 3、1、4、2。

这是代码

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

这是测试示例例

假设：

var selected_id = ["1", "2", "3"]

首先，在点击事件中，您需要使用从 $(this(.attr('id'( 获得的值/id 搜索数组 (selected_id(：

selected_id.indexOf("1"); # this will return 0

这意味着如果获取大于或等于零 (>= 0( 的值，则 item 存在于数组 (selected_id( 中

最后，您可以通过设置索引来删除它，如下所示：

selected_id.remove(1);
return value is:  ["1", "3"]

如果您愿意，请尝试创建一个函数：

function deleteFromArray(params_array, index){
  var result = new Array();
  for(var i in params_array){
    if(params_array[i] == index){
      continue;
    }
    result.push(params_array[i]);
  }
  return result;
}

deleteFromArray(selected_id , 0);
returns: selected_id = ["2", "3"];
相关文章：