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

Question

我想根据所做的选择动态显示和隐藏特定的输入字段。 我尝试了一个for循环，但它一次显示了两个我不想要的输入。 例如，我希望它显示：当我选择Performer 1时，它显示show 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'...)将change事件绑定到select 。
• 隐藏所有其他元素以不堆叠上一个选择中的其他elements 。
• 以后，使用e.target.value获取option的值。
• 使用该值与inputs id进行比较。 [Caret（ ^ ）匹配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 " /> 

Answer 2

请参阅以下代码以获得更好的理解：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="myselect" id="myselect" onChange="perfChange(this.value);" > <option value="" selected>-Select-</option> <option value="1" >Performer 1</option> <option value="2" >Performer 2</option> <option value="3" >Performer 3</option> <option value="4" >Performer 4</option> <option value="5" >Performer 5</option> </select> <input class="hideinput" type="text" id="Performer1f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 1 First Name " /> <input class="hideinput" type="text" id="Performer2f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 2 First Name "/> <input class="hideinput" type="text" id="Performer3f" style="display: none; width: 100%;" name='entryname1f[] ' placeholder="Performer 3 First Name "/> <input class="hideinput" type="text" id="Performer4f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 4 First Name "/> <input class="hideinput" type="text" id="Performer5f" style="display: none; width: 100%;" name='entryname1f[]' placeholder="Performer 5 First Name "/> <input class="hideinput" type="text" id="Performer1l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 1 Last Name " /> <input class="hideinput" type="text" id="Performer2l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 2 Last Name "/> <input class="hideinput" type="text" id="Performer3l" style="display: none; width: 100%;" name='entryname1l[] ' placeholder="Performer 3 Last Name "/> <input class="hideinput" type="text" id="Performer4l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 4 Last Name "/> <input class="hideinput" type="text" id="Performer5l" style="display: none; width: 100%;" name='entryname1l[]' placeholder="Performer 5 Last Name "/> <script> function perfChange(display_id = 0) { var make_id_1 = "#Performer"+display_id+"f"; var make_id_2 = "#Performer"+display_id+"l"; $(".hideinput").hide(); $(make_id_1).show(); $(make_id_2).show(); } </script> 

了解步骤：

1. 首先，我将选项的值传递给perfChange函数
2. 现在在perfChange函数中，我使用此ID创建ID
3. 在那之后，我将所有输入添加到一个类hideinput 。
4. 现在，通过使用此类，我将隐藏所有输入，之后我仅尝试显示需要显示的输入

Answer 3

我认为您可以全部隐藏它们并显示所选内容。

for (z=1; z<=size; z++){
   $("#Performer"+z+"f").hide();
   $("#Performer"+z+"l").hide();
  }
$("#"+this.value+"f").show();
$("#"+this.value+"l").show();

Answer 4

我将您的选择框值更改为performer_1，performer_2，依此类推。 并将此值传递给perfchange（this.value）。 然后将其与_分开，并按如下所示显示div。

 function perfChange(val) { var div=val.split('_'); $("#Performer"+div[1]+"f").show(); $("#Performer"+div[1]+"l").show(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="myselect" id="myselect" onChange="perfChange(this.value);" > <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 "/>