匹配克隆的依赖下拉列表中的两个 ID 属性答案

【问题标题】：Matching two ID attributes from cloned dependent dropdown list匹配克隆的依赖下拉列表中的两个 ID 属性
【发布时间】：2022-10-07 10:52:53
【问题描述】：

在这段代码中，我有 2 个相关的下拉列表和一个用于复制/克隆表单的按钮。颜色选择会根据项目中选择的内容而变化。当我复制下拉列表时，该功能不起作用。我尝试更改重复下拉列表的 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>

提示：不要使用换行符来分隔间距。那不是他们的目的。使用边距或填充。
ID 在 HTML 中必须是唯一的，因此即使您的脚本最终不需要它，也要为有效的 HTML 执行此操作。

标签： html jquery

【解决方案1】：

由于您已经将 jQuery 导入到项目中，我建议您充分使用它。

建议使用jQuery 的.on 方法而不是onclick 属性。
更改事件不会对动态创建的元素起作用。你应该改用“事件委托”.
最后但同样重要的是，如果 ids 用作选择器，您可以删除它们。您可以使用 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>

【讨论】：