How to change the element of select tag when adding new select tag

Question

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

I'm unclear what you're trying to do here and where the problem might be, but this seems really wrong overall. Why is there so much HTML in your Javascript? You should instead look at having static HTML and hiding/showing UI elements depending on what's selected. See this question and answers: https://stackoverflow.com/questions/6242976/javascript-hide-show-element — Christopher Schneider, Sep 21 '21 at 14:43

Nitheesh · Accepted Answer · 2021-09-22T16:12:44.207

1

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

edited Sep 22 '21 at 16:12

answered Sep 21 '21 at 14:44

Nitheesh

19,238
3
22
49

How about the new added select tag the element didn't show. – Aldrin Atolle Sep 22 '21 at 02:02
Your newly created select tag is not getting added to dom? – Nitheesh Sep 22 '21 at 02:16
Yes sir. It show only on the default select tag but in the new added select tag the element didn't show. Please help me to fix it. – Aldrin Atolle Sep 22 '21 at 02:49
As of now we are displaying one select element initially and a clone button. when we clone the select new select nodes will be added and there will be only one input being toggled. Do you want to show indepenedent inputs for each select? – Nitheesh Sep 22 '21 at 03:28
Yes I want that when I add new select tag the element will show not only on the first part but all the select tag – Aldrin Atolle Sep 22 '21 at 06:33
Can you please help me. – Aldrin Atolle Sep 22 '21 at 15:40
@AldrinAtolle I have updated the anser. Please check. – Nitheesh Sep 22 '21 at 16:13
Sir thank you so much for your help it really help me now I can finish my project. – Aldrin Atolle Sep 23 '21 at 00:47
Please approve this answer if this is what you are looking for. Happy to have an upvote aswell – Nitheesh Sep 23 '21 at 02:20
1

I already accepted your answer sir thank you so much – Aldrin Atolle Sep 23 '21 at 03:28

score 0 · Answer 2 · answered Sep 21 '21 at 14:49

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>')
  }
 });
});

@Aldrin Atolle consider accepting answer if it solves your problem and your most wellcome — Amir Rahman, Sep 22 '21 at 03:50

How to change the element of select tag when adding new select tag

2 Answers2