Select2 ajax 带有自定义数据值的预选

Question

所以我有一个带有 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,
                    }
                })      
            }
        });
    });

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

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

产品变量没有价格数据属性。

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

Answer 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;         
});

Select2 ajax 带有自定义数据值的预选

Select2 ajax preselection with custom data value

javascript

jquery

jquery-select2