select with images (generate div’s by id dynamically)

Question

http://ibrc.com.br/teste/icon-select-example4.html

I am 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 from name='algumvalor' to later store the data in the database. I am trying to loop in javascript to generate the id’s automatically referring to divs there’s HTML, but it’s not working, only the last div is working (changing the values).

I got the plugin on this link: https://github.com/bug7a/iconselect.js

Answer 1

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 need 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;
            });
        })();
    }
};

jsFiddle: http://jsfiddle.net/fo81twkg/

I wasn’t sure if you wanted an input with all the chosen images. I put that together at the end.