具有自定义数据值的 Select2 ajax 预选答案

【问题标题】：Select2 ajax preselection with custom data value具有自定义数据值的 Select2 ajax 预选
【发布时间】：2025-12-20 20:30:06
【问题描述】：

所以我有一个带有 select2 的多选下拉菜单，我从数据库中获取信息。问题是使用许多值预填充下拉列表适用于文档中的示例，但我还想包含一个额外的数据字段。这就是我尝试填充下拉列表的方式：

var productSelect = $('#product_ids');
    $.ajax({
        type: 'GET',
        url: '/ajaxOrdersData/' + orderID
    }).then(function (datas) {        
        datas.forEach(data => {
            var option = new Option(data.name, data.id, true, true);
            option.dataset.price = data.price;      
            productSelect.append(option).trigger('change');
        });     
        productSelect.trigger({
            type: 'select2:select',
            params: {
                data: datas.map(function (item) {                       
                    return {
                        text: item.nfame,
                        id: item.id,
                        price: item.price,
                    }
                })      
            }
        });
    });

上面的代码确实创建了一个带有 data-price 值的选项标签，但是像下面这样检索该值不起作用：

var products = $('#product_ids').select2('data');

products 变量没有价格数据属性。

单击 DOM 上的按钮时，我还有哪些其他方法可以在多选中获取所有产品的价格数据属性？

【问题讨论】：

试试$().data('price').. 必须在工作中处理 Select2 和 $.. 不是粉丝。
是的，这确实有效，但如何迭代许多产品？
我很难准确地记住，但是在设置 select2 元素时，您指定了一个数组，所选选项被推送到该数组。我们还在我们的堆栈中使用淘汰赛，所以我怀疑我的确切解决方案会对您有很大帮助.. 如果我误解了您，您的所有条目都在 productSelect.children 集合中。

标签： javascript jquery jquery-select2

【解决方案1】：

这是我想出的解决方案：

 var products =$('#product_ids option:selected');

然后去取值：

 $.each(products, function(index, value) {            
            actualTotals += Number(value.dataset.price);            
        });

另一种解决方案是保留 .select2('data');获取选择的方式，而是使用 jquery 从结果对象中检索每个元素的属性：

var products =$('#product_ids').select2('data'); 
$.each(products, function(index, value) {            
                price = value.element.attributes['data-price'].value;         
});

【讨论】：