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

Question

我正在尝试构建一个 CRUD 操作，并且php我js(ajax)有一些过滤器，用户可以向类别添加更多过滤器，在添加操作时效果很好，但是在编辑时我使用 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

您可以data-id使用$("#filters_cat_update option:selected")它为您提供选定的选项，您可以使用它.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>