是否可以使用 jQuery 根据下拉菜单中的不同选择显示隐藏字段？
我在为多个隐藏字段编写代码时遇到问题。
基本上，我需要通过分配“hide3”或“hide4”来分配“select 1”中的所有选择以显示同一字段集中的不同字段。
<script type="text/javascript">
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "retouching" ) {
$("#hide1").slideDown("fast");
} else {
$("#hide1").slideUp("fast");
}
});
$("#select2").change(function(){
if ($(this).val() == "fashion" || $(this).val() == "beauty" || $(this).val() == "product" || $(this).val() == "architectural") {
$("#hide2").slideDown("fast");
} else {
$("#hide1").slideUp("fast");
}
});
$("#select1").change(function(){
if ($(this).val() == "photography" ) {
$("#hide3").slideDown("fast");
} else {
$("#hide3").slideUp("fast");
}
});
$("#select3").change(function(){
if ($(this).val() == "fashion" || $(this).val() == "beauty" || $(this).val() == "product") {
$("#hide4").slideDown("fast");
} else {
$("#hide3").slideUp("fast");
}
});
$("#select1").change(function(){
if ($(this).val() == "studio" ) {
$("#hide5").slideDown("fast");
} else {
$("#hide5").slideUp("fast");
}
});
});
</script>
<fieldset>
<legend>Project Details</legend>
<div class="input select">
<dl>
<dt><label for="select1">Subject:</label></dt>
<dd>
<select name="select1" id="select1">
<option value="">(choose one)</option>
<option value="photography">Photography</option>
<option value="retouching">Retouching</option>
<option value="studio">Studio Rental</option>
</select>
</dd>
</dl>
</div>
<div class="hide" id="hide1">
<div class="input select">
<dl>
<dt><label for="select2">Type:</label></dt>
<dd>
<select name="select2" id="select2">
<option value="">(choose one)</option>
<option value="fashion">Fashion</option>
<option value="beauty">Beauty</option>
<option value="product">Product</option>
<option value="architectural">Architectural</option>
</select>
</dd>
</dl>
</div>
</div>
<div class="hide" id="hide2">
<div class="input select">
<dl>
<dt><label for="budget">Budget:</label></dt>
<dd><input type="text" name="budget" id="budget" size="32" maxlength="128" /></dd>
</dl>
<dl>
<dt><label for="message">Message:</label></dt>
<dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>
</dl>
<dl>
<dt><label for="upload">Upload a File:</label></dt>
<dd><input type="file" name="upload" id="upload" /></dd>
</dl>
</div>
</div>
<div class="hide" id="hide3">
<div class="input select">
<dl>
<dt><label for="select3">Type:</label></dt>
<dd>
<select name="select3" id="select3">
<option value="">(choose one)</option>
<option value="fashion">Fashion</option>
<option value="beauty">Beauty</option>
<option value="product">Product</option>
</select>
</dd>
</dl>
</div>
</div>
<div class="hide" id="hide4">
<div class="input select">
<dl>
<dt><label for="budget">Budget:</label></dt>
<dd><input type="text" name="budget" id="budget" size="32" maxlength="128" /></dd>
</dl>
<dl>
<dt><label for="message">Message:</label></dt>
<dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>
</dl>
<dl>
<dt><label for="upload">Upload a File:</label></dt>
<dd><input type="file" name="upload" id="upload" /></dd>
</dl>
</div>
</div>
<div class="hide" id="hide5">
<div class="input select">
<dl>
<dt><label for="message">Message:</label></dt>
<dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>
</dl>
</div>
</div>
</fieldset>