Por favor, ayúdenme con este problema. Quiero que cuando seleccione la opción, se muestre el elemento. Pero sucedió que no funcionó, incluso cuando agregué una nueva etiqueta de selección, el código no funcionó. Aquí está mi código.
<div id="ugh"> <select class="handicap"> <option value="a"> Example 1</option> <option value="b"> Example 2</option> </select> <div id="ahh"> <div class="row"> <div class="inputs"> </div> </div> </div> </div> <a id="sigepapa" class="fa fa-clone"></a> <script> $('#sigepapa').click(function(){ var ako =''; ako += '<select class="handicap">'; ako += '<option value="a">Example 1</option>'; ako += '<option value="b"> Example 2</option>'; ako += '</select>'; ako += '<div id="ahh">'; ako += '<div class="row">'; ako += '<div class="inputs">'; ako += '</div>'; ako += '</div>'; ako += '</div>'; $('#ugh').append(ako); }); </script> <script> $(document).ready(function() { $('.handicap').change(function() { var val = $(this).val(); if(val == 'a') { $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>'); } else { $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>') } }); }); </script>Quiero que cuando seleccione el elemento se muestre según el valor seleccionado. Y también cuando agrego una nueva etiqueta de selección, el elemento se mostrará según el valor de selección
$(document).ready se activa la primera vez que se carga el DOM. Entonces, en ese momento, solo hay un nodo y una identificación de evento vinculada a ese nodo. Cuando se agrega un nuevo nodo, el evento de cambio no se agrega con $(document).ready . Tienes que vincular eso de forma natural como lo hice en tu $('#sigepapa').click listner.
También debe tener entradas independientes para todas y cada una de las etiquetas seleccionadas que estaban presentes inicialmente y que se crearon con el clon. Entonces, en lugar de seleccionar el elemento con id usando $('#ahh') , podría usar ahh como nombre de clase. Porque estos elementos estarán presentes más de una vez. Se supone que la identificación es única, por lo que es mejor usar la clase para este propósito.
Este nodo se puede seleccionar al cambiar la etiqueta de selección como el next elemento de la selección. Esta selección se puede recibir usando event.target from change event. Ese elemento en particular será $(e.target).next('.ahh') en este escenario
violín de trabajo
$("#sigepapa").click(function () { var ako = ""; ako += '<select class="handicap">'; ako += '<option value="a">Example 1</option>'; ako += '<option value="b"> Example 2</option>'; ako += "</select>"; ako += '<div class="ahh">'; ako += '<div class="row">'; ako += '<div class="inputs">'; ako += "</div>"; ako += "</div>"; ako += "</div>"; $("#ugh").append(ako); bindEvents(); }); function bindEvents() { $(".handicap").change(function (e) { var val = $(this).val(); if (val == "a") { $(e.target).next('.ahh').html( '<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>' ); } else { $(e.target).next('.ahh').html( '<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>' ); } }); } $(document).ready(function () { bindEvents(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="ugh"> <select class="handicap"> <option value="a">Example 1</option> <option value="b">Example 2</option> </select> <div class="ahh"> <div class="row"> <div class="inputs"></div> </div> </div> </div> <a id="sigepapa" class="fa fa-clone">Clone</a>su evento onchange está vinculado con elementos antiguos, por lo que no funcionó con elementos agregados recientemente, hay una manera de manejar esta situación, intente este cambio y avíseme si esto ayuda en su situación
$(document).ready(function() { // edited line $('#ugh').on("change",".handicap",function() { var val = $(this).val(); if(val == 'a') { $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="mc" class="ja"></div></div>'); } else { $('#ahh').html('<div class="row"><div class="inputs"><input type="text" name="cb" class="ja"></div></div>') } }); });