从克隆的相关下拉列表中匹配两个 ID 属性

Question

在这段代码中，我有 2 个相关的下拉列表和一个指向 duplicate/clone 表单的按钮。颜色选择根据在项目中选择的内容而变化。当我复制下拉列表时，该功能不起作用。我尝试更改重复下拉列表的 ID，但仍然无法匹配 2 个下拉列表的 ID。有什么解决办法吗？谢谢

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 class="select-form">
  <div class="duplicate" 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>

Answer 1

既然你已经将jQuery导入到项目中，我建议你充分利用它。

建议使用jQuery的.on方法而不是onclick属性。
更改事件不适用于动态创建的元素。您应该改为使用 "event delegation".
最后但同样重要的是，如果 id 用作选择器，您可以删除它们。您可以使用 jQuery 轻松横向 DOM

试试这个

$(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 class="select-form">
  <div class="duplicate">
    <br>
    <label>item</label>
    <select class="item">
      <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 class="color">
      <option disabled selected>Select item first</option>
    </select>
  </div>
</form>
<br><br>
<button type="button" id="add-button">add</button>

从克隆的相关下拉列表中匹配两个 ID 属性

Matching two ID attributes from cloned dependent dropdown list

html

jquery