How do I manipulate data from a select created from jquery

Question

How do I manipulate data from a select created from jquery

Navigation

#1 by (0 votes)

1

I'm trying to get the values from a select that I've inserted through a jquery, and depending on the value it adds elements inside a div also created by that same jquery. The problem is that I can not get these values.

This is the code where I insert the select into a div created in html.

<!-- Jquery Add Formulario -->
<script>

$(function AddForm() {
    var adicionar = $('.grid');
        $(document).on('click', '#id_AddMais', function () {
            $('<div  class="questionario w3-col m11 w3-white w3-padding-large">'+
              '<form method="POST" action="">'+

                  '<div class="w3-half">'+
                    '<input id="id_Enunciado" class="w3-input" type="text" name="txtEnunciado" placeholder="Enunciado">'+
                  '</div>'+

                  '<div class="styled-select w3-light-grey w3-right slate">'+

                  '<select id="id_FormaResposta" name="formaResposta">'+

                  '<optgroup>'+
                    '<option value="respostaCurta">Resposta curta</option>'+
                    '<option value="paragrafo">Parágrafo</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="multiplaEscolha">Múltipla escolha</option>'+
                    '<option value="caixasDeSelecao">Caixas de seleção</option>'+
                    '<option value="listaSuspensa">Lista suspensa</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="uploadArquivo">Upload de arquivo</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="escalaLinear">Escala linear</option>'+
                    '<option value="gradeME">Grade de múltipla escolha</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="data">Data</option>'+
                    '<option value="horario">Horário</option>'+
                  '</optgroup>'+

                  '</select>'+
                '</div>'+

                '<input id="id_Suporte" class="w3-input" type="text" name="txtSuporte" placeholder="Suporte">'+

                '<input id="id_Comando" class="w3-input" type="text" name="txtComando" placeholder="Comando">'+

              '</form><br>'+

              '<div class="divResposta">'+

              '</div><br>'+

              '<button  onclick="" id="id_Excluir" class="w3-bar-item w3-button w3-right" style="color: grey"><i class="material-icons">delete</i></button>'+
              '<button  onclick="" id="id_Copiar" class="w3-bar-item w3-button w3-right" style="color: grey"><i class="fa fa-copy"></i></button>'+


            '</div>').appendTo(adicionar);
            return false;
       });

       $(document).on('click', '#id_Excluir', function () {
             $(this).parents('.questionario').remove();
               return false;
       });
});
</script>

Here I am "taking" the value of the select and trying to insert elements inside the div (divResponse) created previously.

<!-- Pegar valor select -->
<script>

$(document).ready(function(){

$('#id_FormaResposta').on('change', function(){

    var valorSelect = $(this).val();
    var modificarDiv = $('.divResposta');

    if(valorSelect == 'paragrafo'){

        $(
            '<input type="text" value="" placeholder="Paragrafo" disabled >'

        ).appendTo(modificarDiv);
        return false;

    }

});

});

</script>

If anyone can help me, thank you.

jquery select value

asked by anonymous 05.06.2017 / 20:05

1 answer

Sort the contents of the MetroGridView by clicking on the Heder title of a given column Validate form inputs with regular expressions

score 0 · Accepted Answer

I do not know the sequence of HTML additions on your page, but assuming you defined the events and then called: AddForm, which added the elements, the change event will not be triggered, because it was delegated before the element have been rendered. So let's change the assignment to the document.

I suggest that since you add multiple forms, do not use the id for select, which would define a single element but a class. And your code would look like:

$(document).on('change', '.FormaResposta', function(){
    var valorSelect = $(this).val();
    var modificarDiv = $(this).parents(".questionario").find('.divResposta');

    if(valorSelect == 'paragrafo'){
        $('<input type="text" value="" placeholder="Paragrafo" disabled >').appendTo(modificarDiv);
        return false;
    }
});