javascript - select2 为每个选项手动设置选项属性

Question

我有 select2 下拉菜单，如:

 <select class="form-control validateblank txtSelectChallan" id="txtSelectChallan" />

我正在通过 ajax 调用设置 dropdown 数据，例如:

   $.ajax({
    type: "POST",
    url: "/Account/MaterialSheet.aspx/GetMaterialSheetByLedgerId",
    data: '{LedgerId: "' + AccId + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        if (data.d.Result == "OK") {
            var challanresults = [];
            $.each(data.d.Records, function (index, challn) {
                challanresults.push({
                    id: challn.MaterialSheet_ID,
                    text: challn.Challan_No,
                    Amount: challn.Total_Amount
                });
            });

            eachtr.find('.txtSelectChallan').select2({
                placeholder: "Select Challan",
                data: challanresults,
                multiple: true
            });
            swal.close();
            challanresults = null;
        }
    },
    error: function (err) {
        swal(
           'Oops...',
           'Error occured while retrieving data',
           'error'
         );
    }
});

然后我得到 dropdown 就像:

<select class="form-control validateblank txtSelectChallan select2 hidden-accessible" id="txtSelectChallan" tabindex="-1" aria-hidden="true" multiple="">
  <option value="1006">123123</option>
  <option value="1007">32123</option>

我尝试使用以下方式设置 option 属性:

             challanresults.push({
                    id: challn.MaterialSheet_ID,
                    text: challn.Challan_No,
                    Amount: challn.Total_Amount
                });

但我无法获得作为 option 属性的任何想法如何为 select2 中的所有 option 设置自定义属性？

Answer 1

在 foreach 循环中像这样尝试，然后设置触发器。

var data = {
id: challn.MaterialSheet_ID,
text: challn.Challan_No
};

var newOption = new Option(data.text, data.id, false, false);
$('#txtSelectChallan').append(newOption).trigger('change');

Check this link for further solution on custom attributes

或者简单地说，你可以在结果集的循环中这样做 var option = "<option value="+challn.MaterialSheet_ID+" amount="+challn.Total_Amount+">"+challn.Challan_No+"</option>

这就是 Select2 官方网站关于自定义数据字段的说法

$('#mySelect2').select2({
// ...
templateSelection: function (data, container) {
// Add custom attributes to the <option> tag for the selected option
$(data.element).attr('data-custom-attribute', data.customValue);
return data.text;
}
});

// Retrieve custom attribute value of the first selected element
$('#mySelect2').find(':selected').data('custom-attribute');

Click here for the above reference link