添加具有唯一名称的新选择 onchange of previous select答案

【问题标题】：Add new select with unqiue name onchange of previous select添加具有唯一名称的新选择 onchange of previous select
【发布时间】：2018-11-05 08:22:43
【问题描述】：

我的工作需要一个页面上有数百个 select 元素。我想动态显示每个select，因为前一个发生了变化。我有一个工作版本，其中我将所有select 元素放在标记中，然后使用一个简单的函数将它们全部隐藏并仅显示第一个。然后在更改每个 select 时添加下一个。

这很好用，但显然并不理想。我不想在标记中放置 500 个 select 项目并无缘无故地隐藏它们，我的 JS 函数将有 1500 行长。再加上那会让我觉得很傻。

如何使用 JS 自动化这个过程？

我不需要每个select 都有一个唯一的id，但我确实需要每个select 都有一个唯一且递增的name。这可能吗？我有一个工作的fiddle。

HTML：

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

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

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

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

JS：

$(document).ready(function() {

  $('.hidden').hide();
  $('#one').show();

  $('#one').change(function(){
     $('#two').show();
  });
  $('#two').change(function(){
     $('#three').show();
  });
  $('#three').change(function(){
     $('#four').show();
  });
  // and so forth...

});

【问题讨论】：

标签： javascript jquery html html-select onchange

【解决方案1】：

HTML：

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

jQuery

$('select').on('change', function() {
$('body').append($(this).clone(true))
})

结果：

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

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

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

【讨论】：

这确实部分解决了我的问题，但我需要每个新选择具有唯一且递增的 name 属性
@ATomCalledStu 也许这可以帮助你stackoverflow.com/questions/8711970/…
@ATomCalledStu 查看答案底部的补充内容。

【解决方案2】：

我的解决方案：

CSS

.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();
  });
});

【讨论】：