本文介绍如何结合Ajax和Select2库在前端实现动态添加和删除多对多关系的数据记录。通过监听Select2的change事件，可以在用户选择或移除标签时触发后台的更新操作，从而保持数据库的同步。示例代码展示了如何处理现有的标签，并在用户交互时更新相关表。
我使用以下代码段使用ajax远程添加新的select2标签，并且我想在新标签/删除标签事件中注册或删除多对多表中的某些记录
桌子看起来像
---------------------------------
+--voucher_id--+|+--product_id--+
---------------------------------
+ 123 | 566 +
---------------------------------
+ 156 | 566 +
---------------------------------
+ 123 | 426 +
---------------------------------
+ 156 | 516 +
---------------------------------
我的Javascript
$(".e6").select2({
tags: true,
placeholder: 'placeholder',
minimumInputLength: 1,
ajax: {
url: 'searchProducts',
dataType: 'json',
data: function(term) {
return {q: term};
},
results: function(data) {
return {results: data};
}
},
createSearchChoice: function(term, data) {
if ($(data).filter(function() {
return this.computername.localeCompare(term) === 0;
}).length === 0) {
return {id: term, name: term};
}
},
formatResult: function(item, page) {
return item.computername;
},
formatSelection: function(item, page) {
return item.computername;
}
});
在返回的json中，我也有一个产品ID，并且我正在寻找一种在select2事件上触发新ajax的方法，但是我不知道应该在哪里保存或删除表中的数据。
做一些研究后，我已经能够构建一个功能，该功能可以更新上表中的记录，并且可以正常工作
$('.e6').on("change", function(e){
console.log(ids);
console.log(gs);
$.ajax({
type: "POST",
url: '/admin/?controller=vouchers&action=updateRelatedProducts',
data: {ids: ids, gs:gs},
error: function () {
alert("error");
}
});
});
但是我在用初始现有标签填充输入字段时遇到问题
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
