Javascript 更改上一个选择后，添加新的选择并使用unqiue名称

我的工作需要在一个页面上选择几百个

元素。我想动态显示每个
选择
，因为前一个已更改。我有一个工作版本，在这个版本中，我将所有
select
元素放在标记中，然后使用一个简单的函数将它们全部隐藏起来，只显示第一个元素。然后在更改每个
时选择
添加下一个

这很好，但显然并不理想。我不想在标记中放入500个
select
项，然后无缘无故地将它们全部隐藏，我的JS函数将有1500行长。而且那会让我觉得很傻

如何使用JS自动化此过程？

我不需要每个
select
都有一个唯一的
id
，但我需要每个
select
都有一个唯一且递增的
名称。这可能吗？我有一份工作

HTML:

HTML：

<select class="hidden" id="one" name='name_0'>
   <option value="">not this one</option>
   <option value="">pick this one</option>
</select>

结果：

<select class="hidden" id="one" name='name_0'>
   <option value="">not this one</option>
   <option value="">pick this one</option>
</select>


注意，我们使用的是clone（）方法的重载。这意味着事件处理程序和数据将与元素一起复制。因此，附加到原始select的任何事件处理程序都将被克隆

如果要增加名称，只需使用计数器，并在克隆后添加属性：

cnt=0;
$('select').on('change', function() {
cnt++
$('body').append($(this).clone(true).attr('name', 'name_' + cnt))
})

我的解决方案：

CSS

JS

const createSelect=index=>`
不是这个
选这个
`;
$（文档）.ready（函数（）{
//生成100个选择
for（设i=0；i<100；i++）{
$（“正文”）.append（createSelect（i））；
}
//显示第一选择
$（`.select[data index='0']`）.show（）；
$（'.select'）。在（'change'，function（）上{
//当前已更改的选定对象的存储索引
const index=parseInt（$（this）.attr（'data-index'），10）；
//显示下一个选择
$（`.select[data index='${index+1}']`.show（）；
});
});
这确实部分解决了我的问题，但我需要每个新选择都有一个唯一且递增的
名称
property@ATomCalledStu也许这可以帮助@AtomCaledStu了解答案底部的添加内容。
$('select').on('change', function() {
$('body').append($(this).clone(true))
})

cnt=0;
$('select').on('change', function() {
cnt++
$('body').append($(this).clone(true).attr('name', 'name_' + cnt))
})

.hidden {
  display: none;
}

const createSelect = index => `
<select name="select-${index}" class="hidden select" data-index=${index}>
   <option value="">not this one</option>
   <option value="">pick this one</option>
</select>
`;

$(document).ready(function() {
  // Generate 100 selects
  for (let i = 0; i < 100; i++) {
    $("body").append(createSelect(i));
  }

  // Show first select
  $(`.select[data-index='0']`).show();

  $('.select').on('change', function() {
    // Store index of a select currently changed
    const index = parseInt($(this).attr('data-index'), 10);

    // Show next select
    $(`.select[data-index='${index + 1}']`).show();
  });
});