Javascript 在动态HTML表单上有条件地显示字段时遇到问题

答案是使用类来解决这个问题。然而，下面的答案更准确

我有一个html表单，它可以扩展到未定义数量的输入组。每个输入都分配了一个递增的ID。我正试图根据选择的输入显示每个组中的字段。到目前为止，它对于ID为0的第一个字段组工作正常

因此，初始表单在html中如下所示：

<ol id="activity">
  <li class="activity_var">
    <select name="activity-type_0" id="activity-type_0">
      <option>Choose Activity</option>
      <option value="Drilling">Drilling</option>
      <option value="Casing">Casing</option>
    </select>
    <input type="text" style="display:none;" name="activity-drill_0" id="activity-drill_0"/>
    <button type="button" class="activity_del">Delete Button</button>
  </li>
</ol>
<input type="button" value="Add Button" class="activity_add">

但是，如何动态地使用上述函数以新字段组及其新ID为目标

---

我不熟悉JavaScript和JQuery，但我认为需要某种计数和循环？

首先，我会向所有描述活动的select标记添加css类或数据属性，如下所示：

<select name="activity-type_0" class="activity-types">

接下来，我将向要显示/隐藏的字段添加与选项值具有相同值的数据属性：

<input type="text" style="display: none" name="activity-drill_0" id="activity-drill_0" data-activity="Drilling">
<input type="text" style="display: none" name="activity-casing_0" id="activity-casing_0" data-activity="Casing">

---

基本上你需要根据动态id（按顺序）显示和隐藏？我不会使用id；使用CSS类以每个下拉列表及其同级文本框为目标。有关更多信息，请参阅。@Duck\u dragon是的，但我们不知道序列的确切长度，它可能是无限的。在上的答案阐明了如何使用类。然而，你的作品正是我需要这个问题谢谢！

<select name="activity-type_0" class="activity-types">

$('.activity-types').on('change', function(e) { ... }

<input type="text" style="display: none" name="activity-drill_0" id="activity-drill_0" data-activity="Drilling">
<input type="text" style="display: none" name="activity-casing_0" id="activity-casing_0" data-activity="Casing">

$('.activity-types').on('change', function(e) {
    $('#' + e.target.id).siblings('[data-activity=' + $(e.target).val() + ']').show();
}