How to differentiate select’s dynamically created by Javascript?

Asked

Viewed 55 times

0

I wonder if it is possible to identify elements created via Javascript, so that I can distinguish when reading this generated array.

Specifically, I have the option to generate elements select and need to identify so you can set a field of obs and this is inserted only for the objects selected in select servant.

Dynamic creation of fields

$(document).on("click", ".add, .close", function(event) {
        if($(this).hasClass('add'))
        {
            var numero = parseInt($(this).closest('.linha-flex').find('.form-number').html())+1;
            var texto = `<script>   $('.espec').select2(
                                    {minimumInputLength: 3}
                                    );
            </script>
            <div class="linha-flex linha-flex-grow">
                            <div class="form-number">`+numero+`</div>
                            <div class="item-flex">
                                Procedimento
                                <select name="proc[]" class="select-form proc" required style="width: 300px;">`+option_proc+`</select>      
                            </div>
                            <div class="item-flex">
                                Especificação
                                <select name="espec[]" class="select-form espec" multiple="multiple" required style="width: 400px;"><option value=''>Selecione</option></select>        
                            </div>
                            <div class="item-flex">
                                Observação
                                <textarea name="obs[]" class="obs-form" style="width: 400px;"></textarea>       
                            </div>
                            <div class="item-flex acao flex-plus"><i class="fa fa-plus-square fa-lg add" title="Adicionar mais"></i></div>
                         </div>`;
            $(this).closest('.linha-flex').after(texto);
            $(this).after("<i class='fa fa-times fa-lg close' title='Remover linha'></i>");
            $(this).remove();
        }

How to bind my select of Specification to my field of obs?

I will try to exemplify excuse if it is not clear. Each <div class="linha-flex linha-flex-grow"> generates a select and Obs. I have to link Obs to the items in my select, so far so good. however when I create new <div class="linha-flex linha-flex-grow"> lose control over the Obs field, due to giving Submit in my form it will turn everything into a single array that would be name="espec[]", Therefore, I am unable to define for certain which selected items will receive the Obs.because I could only assign the Obs to the select created along with it. In case you are still confused I will try to illustrate better and bring a screen print and the complete code.

  • Do you want to enter the selected values in select in the "Obs" field? In what format? Comma-separated? How will select be popular? I think your question lacks more detail.

  • I will edit the post to try to be clearer. thanks in advance.

  • You would have to create indexes in the arrays each time you add a line, something like name="espec[0]", name="espec[1]", name="espec[2]" etc....

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.