Matching two ID attributes from cloned dependent dropdown list-CodePudding

In this code I have 2 dependent dropdown list and a button to duplicate/clone the form. the color selection changes based on what is selected in item. When I duplicate the dropdown list the function didn't work . I tried changing the id of the duplicated dropdown list but still cant manage to match the id of 2 dropdown list. Is there any solution? Thanks.

var count = 1;
var duplicate_div = document.getElementById('duplicate_1');

function addRecord() {
  var clone = duplicate_div.cloneNode(true);
  clone.id = "duplicate_"     count;
  duplicate_div.parentNode.append(clone);
  var cloneNode = document.getElementById(clone.id).children[0];

  $(clone).find("*[id]").each(function() {
    $(this).val('');
    var tID = $(this).attr("id");
    var idArray = tID.split("_");
    var idArrayLength = idArray.length;
    var newId = tID.replace(idArray[idArrayLength - 1], count);
    $(this).attr('id', newId);
  });
}

$(document).ready(function() {
  $("#item_"   count).change(function() {
    var val = $(this).val();
    if (val == "shirt") {
      $("#color_"   count).html("<option>Black</option> <option>Gray</option>");
    } else if (val == "pants") {
      $("#color_"   count).html("<option>Blue</option> <option>Brown</option>");
    } else if (val == "shoe") {
      $("#color_"   count).html("<option>White</option> <option>Red</option>");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form >
  <div  id="duplicate_1">
    <br>
    <label>item</label>
    <select id="item_1">
      <option value="template" disabled selected></option>
      <option value="shirt">Shirt</option>
      <option value="pants">Pants</option>
      <option value="shoe">Shoe</option>
    </select>

    <label>color</label>
    <select id="color_1">
      <option disabled selected>Select item first</option>
    </select>
  </div>
</form>
<br><br>
<button type="button" id="add-button" onclick="addRecord()">add</button>

CodePudding user response：

Since you've imported jQuery into the project, I suggest you fully use it.

It's recommended to use jQuery's .on method instead of onclick attribute.
The change event will not work on the dynamically created elements. You should instead use "event delegation".
Last but not least, you can remove the ids if they serve as selectors. You can use jQuery to easily transverse the DOM

Try this

$(document).ready(function() {
  var $cloned = $('.duplicate').first().clone(true);
  var $container = $('.select-form');

  $('#add-button').click(function() {
    $container.append($cloned.clone());
  })

  $('.select-form').on('change', '.item', function() {
    var val = $(this).val();
    var $color = $(this).closest('.duplicate').find('.color');

    if (val == "shirt") {
      $color.html("<option>Black</option> <option>Gray</option>");
    } else if (val == "pants") {
      $color.html("<option>Blue</option> <option>Brown</option>");
    } else if (val == "shoe") {
      $color.html("<option>White</option> <option>Red</option>");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form >
  <div >
    <br>
    <label>item</label>
    <select >
      <option value="template" disabled selected></option>
      <option value="shirt">Shirt</option>
      <option value="pants">Pants</option>
      <option value="shoe">Shoe</option>
    </select>

    <label>color</label>
    <select >
      <option disabled selected>Select item first</option>
    </select>
  </div>
</form>
<br><br>
<button type="button" id="add-button">add</button>