I'm using a plugin that simulates a select, but with images. the intention is to take the values of each image and play within a text input of name='algumvalor' to later save the data in the database. I'm trying to loop in javascript to generate the id's automatically referring to divs there of HTML , but it's not working, only the last div is working (changing the values).
I took the plugin in this link: link
You had some problems with your code.
I changed the logic of your loop while and put icons out of this loop because it generates the same content and does not have to be run multiple times.
I made a corrected version:
window.onload = function () {
var selects = 3; // numeros de selects a procurar
var icons = [1, 2, 3, 4, 5].map(function (nr) { // mapear o nome das imagens para gerar a array icons
return {
'iconFilePath': 'http://ibrc.com.br/teste/images/icons/' + nr + '.png',
'iconValue': nr + ''
};
});
for (var i = 1; i <= selects; i++) { // usando for não precisas de ter count ++ no while
var iconElement = "my-icon-select" + i; // cache do ID
var iconSelect = new IconSelect(iconElement, {
'selectedIconWidth': 48,
'selectedIconHeight': 48,
'selectedBoxPadding': 1,
'iconsWidth': 48,
'iconsHeight': 48,
'boxIconSpace': 3,
'vectoralIconNumber': 5,
'horizontalIconNumber': 1
});
iconSelect.refresh(icons); // importar os icons
(function () { // isto é preciso para encapsular currentIconSelect num escopo próprio
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;
});
})();
}
};
I was not sure if you wanted an input with all the images you chose. I put it together in the end.