匹配克隆的依賴下拉串列中的兩個ID屬性

在這段代碼中，我有 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>

uj5u.com熱心網友回復：

由于您已經將 jQuery 匯入到專案中，我建議您充分使用它。

• 建議使用 jQuery 的.on方法而不是onclick屬性。
• 更改事件將不適用于動態創建的元素。您應該改用“事件委托”。
• 最后但同樣重要的是，id如果 s 用作選擇器，您可以洗掉它們。您可以使用 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>

標籤：html jQuery

上一篇：運行一次然后重復一個腳本

下一篇：如何使輸入文本顯示在文本欄位中？