Estoy usando select2 para seleccionar de una lista la imagen que quiero que se muestre en la pantalla. Para esto necesito establecer un atributo en cada opción: s3_key
Quiero poner este atributo cuando se crea el select2
He visto soluciones para agregar atributos data-* cuando se selecciona una opción. Esta solución no me funciona porque si la entrada ya tiene un valor seleccionado al cargar la página web, la imagen debe mostrarse automáticamente.
$('#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');La variable $aJsonGCIsPrincipalesOtorgados tiene la siguiente estructura:
var data = [ { id: 1, text: 'xxxx'. s3_key: '/xx/image.png' },¿Hay alguna manera de hacer esto?
Código de ejemplo:
no hagas eso, simplemente usa js Object 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>