CodeIgniter中克隆select框后id无法递增的问题求助

嘿，我来帮你搞定这个问题～你现在每次克隆都得到campaign1，核心原因是没有正确维护一个持续递增的计数器，或者每次克隆时计数器都被重置了。作为初学者，我给你两种简单易懂的实现方式：

方法一：使用全局计数器（简单直接） #

这种方式用一个变量来记录当前已经克隆的次数，每次点击克隆按钮就把计数器加1，保证id持续递增。

完整代码示例 #

<!-- 先给select加一个容器，方便管理所有克隆元素 -->
<div id="campaign-container">
  <select id="campaign" class="form-control">
    <option value="">- Choose Campaign -</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div>
<button id="clone-btn">克隆选择框</button>

<script>
// 初始化计数器：因为原id是campaign，第一个克隆的id是campaign1，所以初始值设为1
let cloneCount = 1;

// 获取克隆按钮和容器
const cloneBtn = document.getElementById('clone-btn');
const container = document.getElementById('campaign-container');

// 给按钮添加点击事件
cloneBtn.addEventListener('click', function() {
  // 克隆原select元素，true表示连子元素（option）一起克隆
  const originalSelect = document.getElementById('campaign');
  const clonedSelect = originalSelect.cloneNode(true);
  
  // 设置新的id
  clonedSelect.id = `campaign${cloneCount}`;
  
  // 把克隆的元素添加到容器里
  container.appendChild(clonedSelect);
  
  // 计数器加1，下次克隆就会用下一个数字
  cloneCount++;
});
</script>

代码解释 #

• cloneNode(true)：必须加true，不然只会克隆select本身，里面的option不会被复制
• cloneCount：全局变量，每次克隆后自动加1，确保id不会重复
• 把克隆的元素放到容器里，方便统一管理

方法二：动态统计已有元素数量（更灵活） #

如果担心全局计数器出错（比如手动删除了某个克隆的select后，计数器和实际数量不匹配），可以每次点击时动态统计容器里有多少个以campaign开头的元素，再生成新id。

完整代码示例 #

<div id="campaign-container">
  <select id="campaign" class="form-control">
    <option value="">- Choose Campaign -</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div>
<button id="clone-btn">克隆选择框</button>

<script>
const cloneBtn = document.getElementById('clone-btn');
const container = document.getElementById('campaign-container');

cloneBtn.addEventListener('click', function() {
  // 统计容器里所有id以"campaign"开头的元素数量
  const existingCampaigns = container.querySelectorAll('[id^="campaign"]');
  // 新id的数字就是现有数量（因为原元素是campaign，数量是1，第一个克隆就是campaign1）
  const newId = `campaign${existingCampaigns.length}`;
  
  // 克隆原元素
  const originalSelect = document.getElementById('campaign');
  const clonedSelect = originalSelect.cloneNode(true);
  
  // 设置新id
  clonedSelect.id = newId;
  
  // 添加到容器
  container.appendChild(clonedSelect);
});
</script>

代码解释 #

• querySelectorAll('[id^="campaign"]')：这是CSS选择器，意思是选择所有id以campaign开头的元素
• existingCampaigns.length：得到现有元素的总数，比如原元素是1个，第一次克隆时总数是1，新id就是campaign1，第二次克隆时总数是2，新id是campaign2，以此类推
• 这种方法不需要全局变量，即使手动删除了某个克隆的元素，下次克隆时也会自动计算正确的数量，更灵活

你可以根据自己的需求选其中一种方法，两种都很适合初学者理解和使用～

内容的提问来源于stack exchange，提问作者Satria stuart