JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ibrc.com.br/teste/css/lib/control/iconselect.css">
<script src="http://ibrc.com.br/teste/lib/control/iconselect.js"></script>
<script src="http://ibrc.com.br/teste/lib/iscroll.js"></script>
<base href="http://ibrc.com.br/teste/">
<label id="Form1a1">
<div id="my-icon-select1"></div>
</label>
<input type="text" name="Form1a1" />
<label id="Form1a2">
<div id="my-icon-select2"></div>
</label>
<input type="text" name="Form1a2" />
<label id="Form1a3">
<div id="my-icon-select3"></div>
</label>
<input type="text" name="Form1a3" />
<input type="text" id="todasAsImagens" />
JavaScript
window.onload = function () {
var selects = 3;
var icons = [1, 2, 3, 4, 5].map(function (nr) {
return {
'iconFilePath': 'http://ibrc.com.br/teste/images/icons/' + nr + '.png',
'iconValue': nr + ''
};
});
for (var i = 1; i <= selects; i++) {
var iconElement = "my-icon-select" + i;
console.log(iconElement);
var iconSelect = new IconSelect(iconElement, {
'selectedIconWidth': 48,
'selectedIconHeight': 48,
'selectedBoxPadding': 1,
'iconsWidth': 48,
'iconsHeight': 48,
'boxIconSpace': 3,
'vectoralIconNumber': 5,
'horizontalIconNumber': 1
});
iconSelect.refresh(icons);
(function () {
var currentIconSelect = iconSelect;
$('#' + iconElement).on('changed', function () {
var $this = $(this);
var novoValor = currentIconSelect.getSelectedValue()
var nomeCampo = $this.parent('label').attr('id');
$("[name='" + nomeCampo + "']").val(novoValor);
// atualizar o geral
var todosInputs = $('input[name^="Form1"]').map(function () {
return this.value;
}).get().filter(Boolean).join(',');
document.getElementById('todasAsImagens').value = todosInputs;
});
})();
}
};