Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

130
Visualizações
How to change the element of select tag when adding new select tag

Please help me with this problem I want that when I select the option the element will show. But it happen it didn't work even when I add new select tag the code didn't work. Here is my code.

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

I want that when I select the element will show depending on the select value. And also when I add new select tag the element will show depending on the select value

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

$(document).ready triggers the first time when the DOM loads. So at that time there is only one node and event id bind to that node. When new node is added, the change event is not added with $(document).ready. You have to bind that namually as I did in your $('#sigepapa').click listner.

Also you have to have independent inputs for each and every select tags that were present initially aswell as created with clone. So rather than selecting element with id using $('#ahh'), you could use ahh as the classname. Because these elements will be present more than one time. Id is supposed to be unique, so better use class for this purpose.

This node can be selected on change of the select tag as the next element of the select. This select can be recieved using event.target from change event. That particular element will be $(e.target).next('.ahh') in this scenario

Working Fiddle

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

about 4 years ago · Juan Pablo Isaza Relatório

0

your onchange event is bind with old elements so it didnt work with newly added elements there is a way to handle this situation try this change and let me know if this helps in your situation

$(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>')
  }
 });
});
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda