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'...)绑定更改事件到select。
隐藏所有其他元素以不堆叠其他elements 先前的选择。
后来，使用e.target.value来获取option的值。
使用该值与id中的inputs进行比较。 [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>

了解步骤：

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

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 "/>

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

4 个答案: