Question

下面是我曾经使用过的JS，首先，隐藏仅当从下拉列表中选择时才显示的不同形式。这也适用于在一个窗体上的第二个下拉菜单，该窗体在选择时显示不同的输入字段。但是，对于另一种形式的第三个下拉菜单，它不起作用。如何使最后一个下拉菜单起作用？

我已经按照相同的顺序订购了JS和HTML（＃selectForm /选择表单，＃selectService / form1，＃selectSelect / form2）

$(document).ready(function() {
  $('#selectForm').change(function() {
    var formID = $(this).val();
    $('form').css('display', 'none');
    $('#' + formID).css('display', 'block');
  })



$("#selectService").change(function() {
  var labelID = $(this).val();
  $('label').css('display', 'none');
  $('#' + labelID).css('display', 'block');
});

$("#selectSelect").change(function() {
  var labelID = $(this).val();
  $('label').css('display', 'none');
  $('#' + labelID).css('display', 'block');
});
 })

HTML

<select id="selectForm">
<option selected class="label">Select Service</option>
<option value="form1">Corporate</option>
<option value="form2">Commercial</option>
<option value="form3">Music Event</option>
<option value="form4">Social Event</option>
<option value="form5">Headshot</option>
<option value="form6">Personal</option>
</select>

<div class="formcontainer">
<form action="" enctype="text/plain" method="post" 
name="firstform" id="form1">

<input type="text" id="name" name="name" placeholder="Your name">

<input type="text" id="email" name="email" placeholder="Your email">

<input type="text" id="number" name="number" placeholder="Contact number">

<input type="text" id="company" name="company" 
placeholder="Company/Organisation">

<select id="selectService" name="service" onchange="Check(this.value);"> 
<option class="service">Specific Service</option>  
<option value="event">Event</option>
<option value="portrait">Business Portrait/Headshots</option>
<option value="web">Website Images</option>
<option value="other">Other</option>
</select>

<div class="event"> <label id="event"><input name="event" type="text" 
placeholder="Type of event" size="50" /> </label></div>

<div class="event"> <label id="amount"><input name="amount" type="text" 
placeholder="Estimated number of people attending" size="50" /> </label> 
</div>

<div class="event"><label id="specific"><textarea name="specific" 
placeholder="Specific people/moments you want photographed" 
style="height:50px"></textarea></label> </div>

<div class="event"><label id="venue"><textarea name="venue" 
placeholder="Venue name and address" style="height:50px"></textarea> 
</label> </div>

<div class="portrait"> <label id="subject"><textarea name="subject" 
placeholder="Who will be photographed(name/position)" style="height:50px;" 
></textarea> </label></div>

<div class="portrait"><label id="place"><textarea name="venue" 
placeholder="Venue name and address" style="height:50px"></textarea> 
</label> </div>

<div class="web"> <label id="web"><textarea name="web" placeholder="Who or 
what is required to be photographed" style="height:50px" ></textarea> 
</label></div>

<div class="other"><label id="other"><textarea name="other" 
placeholder="Please specify and give as much detail as possible" 
style="height:50px"></textarea></label>
</div>

<input type="text" id="contact" name="contact" placeholder="Best way to 
contact">
<textarea id="add" name="add" placeholder="Additional comments or detail" 
style="height:50px;" ></textarea>
<input type="submit" value="Submit">


  </form>

<form action="" enctype="text/plain" method="post" 
name="secondform" id="form2">

<input type="text" id="name2" name="name2" placeholder="Your name">

<input type="text" id="email2" name="email2" placeholder="Your email">

<input type="text" id="number2" name="number2" placeholder="Contact 
number">

<input type="text" id="company2" name="company2" 
placeholder="Company/Organisation">

<select id="selectSelect" name="select" onchange="Check(this.value);"> 
<option class="select">Select</option>  
<option value="travel">Travelling</option>
<option value="events">Event</option>
<option value="so">Special Occasion</option>
<option value="others">Other</option>
</select>


<div class="travel"> <label id="where"><textarea name="where" 
placeholder="Where/when?" style="height:50px;" ></textarea> </label></div>

<div class="travel"><label id="who"><textarea name="who" placeholder="Who 
with?" style="height:50px"></textarea></label> </div> 

<div class="events"> <label id="event2"><input name="event6" type="text" 
placeholder="Where/when?" size="50" /> </label></div>

<div class="events"> <label id="type"><input name="type" type="text" 
placeholder="Type of event" size="50" /> </label></div>

<div class="events"><label id="specs"><textarea name="specs" 
placeholder="Specific people/moments you want photographed" 
style="height:50px"></textarea></label> </div>

<div class="so"> <label id="sot"><textarea name="web" placeholder="Type of 
occasion" style="height:50px" ></textarea> </label></div>

<div class="so"> <label id="when"><textarea name="where" 
placeholder="When?" 
style="height:50px;" ></textarea> </label></div>

<div class="so"><label id="who2"><textarea name="who" placeholder="Who 
with?" style="height:50px"></textarea></label> </div> 

<div class="others"><label id="others"><textarea name="others" 
placeholder="Please specify and give as much detail as possible" 
style="height:50px"></textarea></label>
</div>

<input type="text" id="contact2" name="contact2" placeholder="Best way to 
contact">
<textarea id="add2" name="add2" placeholder="Additional comments or 
detail" style="height:50px;" ></textarea>
<input type="submit" value="Submit">


</form>

Answer 1

对于#selectService和#selectSelect，您不应使用$('label').css(...。这将隐藏两个下拉菜单的标签元素。相反，您应该使用css类对标签进行分组，并使用它们来隐藏标签。即$(".selectServiceLabel').hide()，“ selectServiceLabel”将是您要通过下拉菜单控制的所有标签的css类。

并且#selectSelect似乎不包含标签ID。此下拉列表的值似乎与div元素的css类匹配。因此，您应该使用$('.'+$(this).val()).show()。您还需要将div元素与css类而不是标签进行分组。

隐藏输入字段，直到在下拉列表中选择？

1 个答案: