添加新的 select 并在更改之前的 select 时使用唯一名称

Question

我的工作需要在一个页面上显示数百个 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...

});

Answer 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() 方法的重载。这意味着 事件处理程序和数据 将与元素一起复制。因此，您附加到原始 select 的任何事件处理程序都会被克隆。

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

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

Answer 2

我的解决方案：

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

添加新的 select 并在更改之前的 select 时使用唯一名称

Add new select with unqiue name onchange of previous select

html

javascript

jquery

html-select

onchange