Добавить новый выбор с unqiue name onchange предыдущего выбора

Question

У меня есть работа, для которой требуется несколько сотен select элементов на странице.Я хочу показать каждый select динамически, так как предыдущий изменен.У меня есть рабочая версия, в которой я поместил все элементы select в разметку, а затем использовал простую функцию, чтобы скрыть их все и показать только первый.Затем при изменении каждого select добавляется следующее.

Это прекрасно работает, но, очевидно, не идеально.Я не хочу помещать 500 select элементов в разметку и скрывать их все без причины, и моя функция JS будет иметь длину 1500 строк.Плюс это заставило бы меня чувствовать себя глупо.

Как я могу автоматизировать этот процесс с помощью JS?

Мне не нужен каждый select, чтобы иметь уникальный id, но мне нужен каждый select иметь уникальный и увеличенный name.Это возможно?У меня есть рабочая скрипка .

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...

});

Answer 1

Мое решение:

CSS

.hidden {
  display: none;
}

JS

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

Answer 2

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 ().Это означает, что обработчики событий и данные будут скопированы вместе с элементами.Таким образом, любой обработчик событий, который вы прикрепили к исходному select, будет клонирован.

Если вы хотите увеличить имя , просто используйте counter и добавьте атрибут после клона:

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