[Answered ]-Get Dynamic Select option in Clone Node using Javscript

by

1👍

✅

As your html are dynamcially created you need to bind it to some static element i.e : any div , document ..etc . Then , in your code you have use same ids for mutliple elements instead use class selector and then get required values using $(this).closest('.memberBody') this will get closest div from select and then use .find to get required values

Demo Code :

document.getElementById('addMember').onclick = function() {
  var addOnDiv = document.getElementById('addon');
  var clonedNode = addOnDiv.querySelector('.memberBody').cloneNode(true);
  $(clonedNode).find('.selectList').html('') //empty age group div
  addOnDiv.appendChild(clonedNode);
}
//just specify select when this event should get called..
$(document).on('change', '.type , .gender', function() {
  //use closest and find to get only value where slect has been change
  var selectedVal = $(this).closest('.memberBody').find('.type').val();
  var selectedGender = $(this).closest('.memberBody').find('.gender').val();

  if ('Child' === selectedVal) {
    var childGroup = '<select name="h_ageGroup" class="custom-select"> <option value="" disabled="disabled" selected="selected">Choose option</option>........</select>';
    $(this).closest('.memberBody').find('.selectList').html(childGroup);
  }
  if ('Adult' === selectedVal) {
    var childGroup = '<select name="h_ageGroup" class="custom-select"> <option value="" disabled="disabled" selected="selected">Choose option</option> <option value=">18 Years"> >18 Years </option></select>';
    $(this).closest('.memberBody').find('.selectList').html(childGroup);
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" id="addMember">Add Member</button>
<div id="addon">
  <div class="memberBody">
    <div class="form-group col-md-4">
      <label>Optimise for:</label>
      <div class="input-group mb-3">
        <!--aded class-->
        <select class="custom-select type" required>
          <option value="" disabled="disabled" selected="selected">Choose option</option>
          <option value="Child">Child</option>
          <option value="Adult">Adult</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label>Gender: </label>
      <div class="input-group mb-3">
        <!--aded class-->
        <select name="h_gender" class="custom-select gender" required>
          <option value="" disabled="disabled" selected="selected">Choose option</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
    </div>

    <div class="form-group col-md-4">
      <label>Age Group:</label>
      <div class="input-group mb-3">
        <!--aded class-->
        <div class="selectList">
        </div>
      </div>
    </div>
  </div>
</div>
👤Swati

Leave a comment