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

0

90
Vistas
how to onchange the select tag when add new select tag

Hey guys please help me with this problem I want to onchange the new added select tag. Here is my code

<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>

please help me with this problem. i want that when i add new select tag the onchange will apply.

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

0

Here is my solution. I did change some ids and added a new 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>

The new cloned elements are not identified by Javascript is because that are not in the DOM tree. So you will have to access them like this.

Also I used value attribute in select options rather than individual ids, which helps to reduce a lot of unnecessary code.

<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

Instead of creating a string, try making a new element directly.

ako = document.createElement("select");

You can then add the onChange listener by setting the attribute for it.

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

The second parameter of the setAttribute function needs to be wrapped in a function so that it doesn't evaluate your handicap function right away.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

You can try to build elements with jQuery. You can 'Run code snippet' to see demo.

$(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