将自定义属性添加到select2中的选项

Question

我正在使用select2插件，因为我想为选项添加自定义属性 “数据值”。

$('select').select2({
  data: [
    {
      id: 'value',
      text: 'Text to display'
    },
  ]
});

如果我在上面的代码中添加“数据值”，它将不会显示该选项。 有没有办法做这样的事情。 我正在使用4. * select2插件

Answer 1

我在Event＆＃39; select2：select＆＃39;的帮助下使用Select2 4.0.5。为达到这个。

在初始化时没有任何效果，当您选择一个选项时，属性将添加到该选项。

$(element).select2(
{
    placeholder:'chose one option',
    data:[ {
        "id": 1,
        "text": "Option 1",
        "data-value":"dv1",
        },
        {
        "id": 2,
        "text": "Option 2",
        "data-value":"dv2",
        }]
}).on('select2:select', function (e) {
    var data = e.params.data;                
    $(this).children('[value="'+data['id']+'"]').attr(
       {
        'data-value':data["data-value"], //dynamic value from data array
        'key':'val', // fixed value
       }
    );
}).val(0).trigger('change');

用于展示占位符的.val(0).trigger('change')并且不会默认。否则第一个选项将是默认值，没有添加属性。

初始： 当选择＆＃34;选项2＆＃34; ：

Answer 2

select2像这样使用：

for(var i = 0; i < arr.length; i++)
{
    $('select').append('<option data-value="'+arr[i].DataValue+'" value="'+arr[i].Id+'">'+arr[i].Text+'</option>');
}

$('select').select2();

附加选项后，您需要调用select2()函数