创建 select2 输入时如何为每个选项添加 data-* 属性？答案

【问题标题】：How to add a data-* attribute to each option when creating a select2 input?创建 select2 输入时如何为每个选项添加 data-* 属性？
【发布时间】：2022-02-05 02:26:23
【问题描述】：

我正在使用 select2 从列表中选择我想在屏幕上显示的图像。为此，我需要为每个选项设置一个属性：s3_key

我想在创建select2的时候放这个属性

我已经看到了在选择选项时添加 data-* 属性的解决方案。这个解决方案对我不起作用，因为如果在加载网页时输入已经选择了一个值，则图像必须自动显示。

      $('#id-gci-main').select2({
        language: '<?= getLanguage() ?>',
        closeOnSelect: true,
        allowClear: true,
        placeholder: '',
        data: <?= $aJsonGCIsPrincipalesOtorgados ?>
    }).on('select2:select', function (e) {
        var data = e.params.data;                
        $(this).children('[value="'+data['id']+'"]').attr({
            'data-s3_key':data["s3_key"], //dynamic value from data array
        });
    }).val(0).trigger('load');

变量 $aJsonGCIsPrincipalesOtorgados 具有以下结构：

var data = [
    {
        id: 1,
        text: 'xxxx'.
        s3_key: '/xx/image.png'
    },

有什么办法吗？

示例代码：

https://jsfiddle.net/JorgePalaciosZaratiegui/fhad7gmr/12/

【问题讨论】：

别这样，直接用js对象
@MisterJojo 到底是什么意思？你能举个例子来说明你的想法吗？
是否有可能让它更可重现，比如也为此添加 html？
从this answer你可以随时检索选择的数据：$("#id-gci-main").select2("data")[0].s3_keyjsfiddle.net/w2npyLr3/1所以真的没有必要将它存储为一个属性，如上所述，如果你想使用templateResult每个“选项”上显示的图像。但这取决于读取属性的内容 - 以及它是从 select2 的列表还是底层的 select 读取它 - 因此是 XY 问题。
@freedomn-m 哦，我不知道这个！非常感谢，我认为这可以帮助我完成我想做的事情

标签： javascript php html jquery jquery-select2

【解决方案1】：

别这样，直接用一个js对象select2data：

const data1 = 
  [ { id: 'key_1', text: 'YY',  s3_key: 'xxxx/yy.png'  } 
  , { id: 'key_2', text: 'BB',  s3_key: 'wwww/bb.png'  } 
  , { id: 'key_3', text: 'AAA', s3_key: 'wwww/aaa.png' } 
  ] 
const select2data = data1.reduce((r,{id,...more})=>(r[id]=more,r),{}) 

// console.log( select2data )


$("#id-gci-main").select2(
    { closeOnSelect : true
    , allowClear    : true
    , placeholder   : ''
    , data          : data1
    }
).on('change', function(e) 
  {
  console.clear()
  console.log( select2data[this.value].s3_key )
  });

#id-gci-main {
  width : 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


<select id="id-gci-main" ></select>

【讨论】：

我试图更改我的数据变量，但选择标签没有显示任何值。现在，我在问题中放了一个示例链接
@JorgePalaciosZaratiegui 我改变了答案