在删除 select2 选项触发 ajax 从 mysql 中删除

Question

我正在尝试使用 php 和 js(ajax) 构建一个 crud 操作，并且我有一些过滤器，用户可以向一个类别添加更多过滤器在添加操作时效果很好，但是在编辑时我使用 ajax 和点击是从数据库中检索并填充输入，但在 select2 上我检索数据如下：

        var main_id = $(this).attr("id");
        $.ajax({  
          url:"<?php echo $site_url;?>/actions/get_filters.php",  
          method:"POST",  
          data:{main_id:main_id},  
          dataType:"json",  
          success:function(data){
            var fl = [];
            var nr = [];
            $.each(data, function(i, field){
              fl.push(field.fil_opt+","+field.txt_fil);
              nr.push(field.id);
                  
            });

            for (i = 0; i < nr.length; ++i) {
                $('#filters_cat_update > option').each(function() {
                   $(this).attr('data-id', nr[i++]);
                });
            }
            $('#filters_cat_update').val(fl);
            $('#filters_cat_update').trigger('change'); // Notify any JS components that the value changed
               
          }  
        });

我检测到何时删除这样的选项：

    //remove from edit options
    $('#filters_cat_update').on('select2:unselecting', function (e) {
        console.log(e.params.args.data.id);
    });

我的 html 看起来像这样：

<div class="col-lg-6 col-md-12 col-sm-12">
    <select class="js-example-basic-multiple custom-select mr-sm-2" name="filters_update[]" multiple="multiple" id="filters_cat_update">
    <?php 
        $sqlf = mysqli_query($conn, "SELECT * FROM filtre WHERE vizibil=1 ORDER BY pozitie");
        while ($rf = mysqli_fetch_assoc($sqlf)) {?>
             <option data-id="" value="<?=$rf['id'];?>,<?=$rf['nume'];?>"><?=$rf['nume'];?></option>
    <?php } ?>
   </select>
</div>

我想要做的是，当我单击一个选项（例如“颜色”）以使用 ajax 并从表 mysql 中删除时，我为每个类别保存了过滤器并将其删除。 正如您在我的选项中看到的那样，我将过滤器的 id 和过滤器的名称连接起来，这些过滤器来自另一个用户可以创建过滤器的表。 提前谢谢你。

Answer 1

您可以使用$("#filters_cat_update option:selected") 获得data-id，这将为您提供选择的选项，您可以使用.attr 和.val() 来获得所需的值。

演示代码：

$('#filters_cat_update').select2();
$('#filters_cat_update').on('select2:unselecting', function(e) {
  var code = $("#filters_cat_update option:selected").attr('data-id'); //getting id 
  var values = $("#filters_cat_update option:selected").val(); //get values
  var datas = values.split(',');
  var id = datas[0]; //id
  var color = datas[1]; //color
  console.log("id - " + id + " color -  " + color + " data-id -" + code)
//ajax call
  $.ajax({
    url: "your url",
    method: "POST",
    data: {
      id: id,
      color: color,
      code :code
    }, //send data  
    success: function(data) {
      console.log("done")

    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select class="js-example-basic-multiple custom-select mr-sm-2" name="filters_update[]" multiple="multiple" id="filters_cat_update">

  <option data-id="2" value="1,Color">Color</option>
  <option data-id="7" value="2,Color2">Color2</option>
  <option data-id="77" value="3,Color3">Color3</option>
</select>