php - 在删除 select2 选项触发 ajax 从 mysql 中删除
问题描述
我正在尝试使用 and 构建一个 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 和过滤器的名称连接起来,这些过滤器来自另一个用户可以创建过滤器的表。先感谢您。
解决方案
您可以data-id
使用$("#filters_cat_update option:selected")
which 将为您提供选择的选项,您可以使用它.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>
推荐阅读
- python - 如何只保留熊猫数据框每组的前 n% 行?
- database - 如果数据库为空,代码将不起作用
- node.js - NodeJs 和 ElasticSearch:批量插入错误:无法派生 xcontent
- c# - 如何在没有 MVC 的情况下对存储库进行排序、分页和过滤
- google-app-engine - 向特定应用引擎实例发出请求
- java - 使用 Spring 和 HTML5 瓶颈查找/清理本地视频
- asp.net - 我无法创建 DBContext 的实例
- python - 数组的变量范围不同于python中的double
- r - 部署闪亮的应用程序时不会加载 RQuantLib
- python - 创建二进制熊猫数据框(优化循环)