HTML：如何使标签在下拉菜单中可见？

Question

如何使标签可见？

我有2个下拉菜单和2个标签。

<label for="dropdown" class="answer">Model</label>

这是标签，与其他标签相同，这是在显示下拉列表时试图使其可见。

 $(".answer").hide(); 

 <base href="http://ice.com" /> <link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset> <form id="processContactUs" name="processContactUs" action="/send_form_email.php" method="POST"> <div> <label for="firstName">First name<span class="required">*</span></label> <input id="firstName" name="firstName" value="" type="text"> </div> <div> <label for="lastName">Surname<span class="required">*</span></label> <input id="lastName" name="lastName" value="" type="text"> </div> <div class="option"> <label for="gender">Model<span class="required">*</span></label> <div class="gender radio-pair"> <span> <input id="gender1" name="checkdrop" class="checkdrop" value="Ghd" onClick="ckChange(this)" type="checkbox"> <label for="gender1" onClick="ckChange(this)" >Ghd</label> </span> <span> <input id="gender2" name="checkdrop" class="checkdrop" value="Hair" onClick="ckChange(this)" type="checkbox"> <label for="gender2">Hair Dryer</label> </span> </div> </div> <div> <label for="email">Your email<span class="required">*</span></label> <input id="email" name="email" value="" type="email"> </div> <div class="answer"> <label for="dropdown" class="answer">Model</label> <select id="Ghd" name="dropdown" checked class="dropdown"> <option>Ghd Mk5.0</option> <option>Ghd Ms5.0</option> <option>Ghd SS5.0</option> <option>Ghd MK4.2B</option> <option>Ghd MS4.0</option> <option>Ghd SS4.0</option> <option>Ghd. Mk4.0</option> <option>Ghd. 3.1B</option> <option>Ghd 3</option> <option>Ghd SS</option> </select> </div> <div class="answer"> <label for="dropdown" class="answer">Model</label> <select id="Hair" name="dropdown" class="dropdown"> <option>toys</option> <option>games</option> <option>cartoons</option> </select> </div> <div class="opts"> <p>Please enter your ghd order number where possible</p> </div> <div class="textbox"> <label for="query"> Your query<span class="required">*</span> </label> <textarea id="query" name="query"></textarea> </div> <div class="opts"> </div> <div class="buttons"> <input name="contactUs" value="Submit" type="submit"> </div> </form> </fieldset> </div> <script type="text/javascript"> $('input[name=checkdrop]').click(function() { if (this.checked) { console.log(this.value); $('#' + this.value).parent().show(); } else { $('#' + this.value).parent().hide(); } }); </script> <script> function ckChange(ckType) { var ckName = document.getElementsByName(ckType.name); var checked = document.getElementById(ckType.id); if (checked.checked) { for (var i = 0; i < ckName.length; i++) { if (!ckName[i].checked) { ckName[i].disabled = true; } else { ckName[i].disabled = false; } } } else { for (var i = 0; i < ckName.length; i++) { ckName[i].disabled = false; } } } </script> <script type="text/javascript"> function valueChanged() { $(".answer").hide(); $(".checkdrop").click(function() { if ($(this).is(":checked")) { $(".answer").show(); } else { $(".answer").hide(); } }); }; $(".answer").hide(); </script> 

隐藏表单加载时的标签和下拉列表，以便在单击复选框时不显示标签，仅显示下拉列表。

Answer 1

您可以在CSS中使用display属性来执行此操作，也可以直接在JQuery中使用.show() 。 这是一个隐藏后显示它的示例： $(".answer").show();