On remove select2 option trigger ajax remove from mysql - php

Question

i am trying to build an crud operation with php and js(ajax) and i have some filters which user can add more filters to a category works fine on adding operation, but on edit i did with ajax and on click is retriving from databse and fill the inputs but on select2 i retrive data like this:
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
}
});
I detect when i remove an option like this:
//remove from edit options
$('#filters_cat_update').on('select2:unselecting', function (e) {
console.log(e.params.args.data.id);
});
My html looks like this:
<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>
What i want to do is when i click one option for example "color" to go with ajax and delete from table mysql where i have filters saved for each category and remove it.
As you see in my option i have concatenaded id of filter and name of filter coming from another table where user can create filters.
Thank you in advance.

Answer 1

You can get data-id using $("#filters_cat_update option:selected") which will give you selected option using this you can use .attr and .val() to get required values .
Demo Code :
$('#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>