Html，使用增量id克隆選擇選項在第一次克隆時不起作用

我有依賴選擇選項國家和城市的 html 和 jquery 代碼示例，帶有按鈕來復制更多選擇選項，如下所示：

var $duplicate = $('.record').first().clone(true);
var $form = $('.form');
var count = 1;

$('#add_record').click(function() {
  count  = 1;
  $form.append($duplicate.clone());
  $($duplicate).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);
  });
})

$('.form').on('change', '.country', function() {
  var val = $(this).val();
  var $city = $(this).closest('.record').find('.city');
  if (val == "germany") {
    $city.html("<option>Berlin</option> <option>Munich</option>");
  } else if (val == "england") {
    $city.html("<option>London</option> <option>Manchester</option>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
  <div class="record">
    <label>Country</label>
    <select class="country" id="country_1">
      <option disabled selected></option>
      <option value="germany">Germany</option>
      <option value="england">England</option>
    </select>
    <label>City</label>
    <select class="city" id="city_1">
      <option disabled selected></option>
    </select>
  </div>
</form>
<button type="button" id="add_record">add</button>

在 jquery cloned select 選項中，不同的 id 增量為 1，但只有第一個克隆的元素增量 id 不起作用，其余的都很好。你能幫助我錯過什么嗎？謝謝你。

uj5u.com熱心網友回復：

您應該在克隆它$(duplicate) 之前增加 ID 。否則，第一個副本的 ID 與您從中克隆它的原始記錄相同。

var $duplicate = $('.record').first().clone(true);
var $form = $('.form');
var count = 1;

$('#add_record').click(function() {
  count  = 1;
  $($duplicate).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);
  });
  $form.append($duplicate.clone());
})

$('.form').on('change', '.country', function() {
  var val = $(this).val();
  var $city = $(this).closest('.record').find('.city');
  if (val == "germany") {
    $city.html("<option>Berlin</option> <option>Munich</option>");
  } else if (val == "england") {
    $city.html("<option>London</option> <option>Manchester</option>");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
  <div class="record">
    <label>Country</label>
    <select class="country" id="country_1">
      <option disabled selected></option>
      <option value="germany">Germany</option>
      <option value="england">England</option>
    </select>
    <label>City</label>
    <select class="city" id="city_1">
      <option disabled selected></option>
    </select>
  </div>
</form>
<button type="button" id="add_record">add</button>

標籤：html jQuery

上一篇：使用jQuery取消選中復選框時未洗掉禁用屬性

下一篇：jQueryclick僅在函式中呼叫時才起作用