javascript - 根据循环的选择框选择动态显示和隐藏字段

Question

我想根据所做的选择动态显示和隐藏特定的输入字段。我用 for 循环尝试了它，但它一次显示了两个输入，这是我不想要的。我希望它显示例如:当我选择 Performer 1 时，它显示 Performer1f 和 Performer1l 但隐藏其他。我知道我可以对其进行硬编码以显示和隐藏，但当您有大约 100 个字段需要根据选择来显示和隐藏时，它的长度就太长了。

非常感谢您的帮助。提前致谢。

function perfChange() {

  $('.myselectperf option').each(function(){

   var size=$('#myselectperf option').length;

  // as a comma separated string

   for (z=1; z<=size; z++){
    if (this.value == "Performer "+z+"") {
      //$(".myselectperf option[value='Pianoforte']").add();
      //$(".myselectperf option[value='Performer "+z+"']").remove();
       //$('#mul_cat').value="testing";
     $("#Performer"+z+"f").show();
     $("#Performer"+z+"l").show();
     $("#performerLabel").show();
    }
    else {
      $("#Performer"+z+"f").hide();
     $("#Performer"+z+"l").hide();
     $("#performerLabel").hide();

    }

  }

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" id="myselect" onChange="perfChange();"  >
  <option value="" selected>-Select-</option>
  <option value="Performer 1" >Performer 1</option>
  <option value="Performer 2" >Performer 2</option>
  <option value="Performer 3" >Performer 3</option>
  <option value="Performer 4" >Performer 4</option>
  <option value="Performer 5" >Performer 5</option>
  </select>

<input type="text" id="Performer1f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 1 First Name " />

<input type="text" id="Performer2f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 2 First Name "/>

<input type="text" id="Performer3f" style="display: none; width: 100%;" name='entryname1f[] ' placeholder="Performer 3 First Name "/>

<input type="text" id="Performer4f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 4 First Name "/>

<input type="text" id="Performer5f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 5 First Name "/>



<input type="text" id="Performer1l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 1 Last Name " />

<input type="text" id="Performer2l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 2 Last Name "/>

<input type="text" id="Performer3l" style="display: none; width: 100%;" name='entryname1l[] ' placeholder="Performer 3 Last Name "/>

<input type="text" id="Performer4l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 4 Last Name "/>

<input type="text" id="Performer5l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 5 Last Name "/>

Answer 1

这是我想出的解决方案。

• 使用 $('#myselect').on('change'...) 绑定(bind)更改事件 到选择。
• 隐藏所有其他元素，以免堆叠其他元素 之前的选择。
• 随后使用e.target.value获取option的值。
• 使用该值与输入的id进行比较。 [插入符 (^) 匹配 id 的开头]
• 使用.show()我们可以在jQuery中显示隐藏的项目。

代码:

<小时/>

$('#myselect').on('change', e => {
  // Hide all input with type `text` upon change
  // You can edit this code to match an ID or a Class instead
  $('input[type="text"]').hide();
  
  // Retrieved value of the `option`
  let value = e.target.value;
  
  // Select all elements that `start` with the id value
  let foundInputs = $(`input[id^="${value}"]`);
  
  // Show the selected inputs
  foundInputs.show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" id="myselect">
  <option value="" selected>-Select-</option>
  <option value="Performer1">Performer 1</option>
  <option value="Performer2">Performer 2</option>
  <option value="Performer3">Performer 3</option>
  <option value="Performer4">Performer 4</option>
  <option value="Performer5">Performer 5</option>
</select>

<input type="text" id="Performer1f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 1 First Name " />

<input type="text" id="Performer2f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 2 First Name " />

<input type="text" id="Performer3f" style="display: none; width: 100%;" name='entryname1f[] ' placeholder="Performer 3 First Name " />

<input type="text" id="Performer4f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 4 First Name " />

<input type="text" id="Performer5f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 5 First Name " />

<input type="text" id="Performer1l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 1 Last Name " />

<input type="text" id="Performer2l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 2 Last Name " />

<input type="text" id="Performer3l" style="display: none; width: 100%;" name='entryname1l[] ' placeholder="Performer 3 Last Name " />

<input type="text" id="Performer4l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 4 Last Name " />

<input type="text" id="Performer5l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 5 Last Name " />