• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

91
Vistas
cómo cambiar la etiqueta de selección cuando se agrega una nueva etiqueta de selección

Hola chicos, por favor ayúdenme con este problema. Quiero cambiar la nueva etiqueta de selección agregada. Aquí está mi código

 <div id="ugh"> <select onchange="handicap"> <option id=c1> Example (5)</option> <option id="c2"> Example (10)</option> </select> <input id="cap" type="text"> </div> <a id="sigepa" class="fa fa-clone" style="font-size:30px"></a> <script> $('#sigepa').click(function(){ var ako = ''; ako += '<select onchange="handicap();">'; ako += '<option id="c1"> Example (5)</option>'; ako += '<select id="c2"> Example (10)</option>'; ako += '</select>'; ako += '<input id="cap" type="text">'; $('#ugh').append(ako); }); </script> <script> function handicap() { var cap1 = document.getElementById('c1'); var cap2 = document.getElementById('c2'); if(cap1.selected) { document.getElementById('cap').value = 5; } else { document.getElementById('cap').value = 10; } } </script>

Por favor ayúdame con este problema. Quiero que cuando agregue una nueva etiqueta de selección, se aplicará el cambio.

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Aquí está mi solución. Cambié algunos identificadores y agregué un nuevo div.

 <div id="ugh"> <div class="container"> <select class="handicap"> <option value="5"> Example (5)</option> <option value="10"> Example (10)</option> </select> <input class="cap" type="text"> </div>

Javascript no identifica los nuevos elementos clonados porque no están en el árbol DOM. Así que tendrás que acceder a ellos así.

También utilicé el atributo de value en las opciones de selección en lugar de las identificaciones individuales, lo que ayuda a reducir una gran cantidad de código innecesario.

 <script type="text/jajvascript"> $('#sigepa').click(function(){ // this is not in DOM var ako = ''; ako += '<div class="container">'; ako += '<select class="handicap">'; ako += '<option value="5"> Example (5)</option>'; ako += '<option value="10"> Example (10)</option>'; ako += '</select>'; ako += '<input class="cap" type="text">'; ako += '</div>'; $('#ugh').append(ako); }); $(document).on("change", ".handicap", function () { var value = $(this).val(); // selecting the closest input element $(this).closest('.container').find('.cap').val(value); }); </script>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

En lugar de crear una cadena, intente crear un nuevo elemento directamente.

 ako = document.createElement("select");

Luego puede agregar el oyente onChange configurando el atributo para él.

 ako.setAttribute("onchange", function(){handicap()});

El segundo parámetro de la función setAttribute debe incluirse en una función para que no evalúe su función de desventaja de inmediato.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Puedes intentar construir elementos con jQuery. Puede 'Ejecutar fragmento de código' para ver la demostración.

 $(document).ready(function () { $("#sigepa").click(function () { // Check already added select and input, return and do nothing if ($("#cap").length > 0) return; // build select element var select = $("<select>") .append($("<option>").prop("id", "c1").text("Example (5)")) .append($("<option>").prop("id", "c2").text("Example (10)")) .attr('onchange', 'handicap()'); // build input element var input = $("<input>").prop("id", "cap").prop("type", "text"); // append built items to #ugh $("#ugh").append(select).append(input); }); handicap = function () { var cap1 = document.getElementById("c1"); var cap2 = document.getElementById("c2"); if (cap1.selected) { document.getElementById("cap").value = 5; } else { document.getElementById("cap").value = 10; } }; });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ugh"> </div> <a id="sigepa" class="fa fa-clone" style="font-size:30px">sigepa</a> <script> </script> <script> </script>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda