我的jsfiddle在这里:http://jsfiddle.net/justmelat/QnKeZ/
我在页面加载时隐藏字段集,然后根据从下拉列表中选择的产品类型显示特定的字段集。我以为我有这个工作,但是你从产品类型下拉列表中选择了几次,应隐藏或不隐藏的部分。
我该怎么做?或者我错过了什么?
我的jsfiddle就在这里: http://jsfiddle.net/justmelat/QnKeZ/
这里的HTML>>
<form method="post" action="">
<div id="holdMsg"></div>
<fieldset id="mainSection" name="mainSection">
<legend style="color:blue; font-weight:bold">Project Overview Section</legend>
<table style="width: 100%">
<tr>
<td style="height: 33px; width: 178px;">Name</td>
<td style="height: 33px"><input id="1125" name="1125" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px;">Email</td>
<td style="height: 33px"><input id="1026" name="1026" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Title</td>
<td><input id="1089" name="1089" type="text" /></td>
</tr>
<tr>
<td style="width: 178px">Product Type</td>
<td><select id="1169" name="1169">
<option value="">Select</option>
<option value="Cars">Cars</option>
<option value="Boats">Boats</option>
<option value="Planes">Planes</option>
</select></td>
</tr>
</table>
</fieldset>
<fieldset id="section-11" name="section-11">
<legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-12" name="section-12">
<legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
<fieldset id="section-13" name="section-13">
<legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1433" name="1433">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset><br>
<fieldset id="section-1011" name="section-1011">
<legend style="color:green; font-weight:bold">Misc Info Section</legend>
<table cellpadding="2" style="width: 100%">
<tr>
<td style="width: 334px; height: 35px"><label>Size:</label></td>
<td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
</tr>
<tr>
<td style="height: 35px; width: 334px">Color:</td>
<td style="height: 35px">
<select id="1302" name="1302">
<option value="Orange">Orange</option>
<option value="Blank">Blank</option>
<option value="Green">Green</option>
</select></td>
</tr>
<tr>
<td style="width: 334px">Description:</td>
<td>
<textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
</tr>
</table>
</fieldset>
</form>
jquery here&gt;&gt;
$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#section-1011").hide();
var projtype = new Array(
{value : 'Cars', sect_id : 'fieldset#section-11'},
{value : 'Planes', sect_id : 'fieldset#section-12'},
{value : 'Boats', sect_id : 'fieldset#section-13'}
);
$("select#1169").on('change',function () {
var thisVal = $(this).val();
var sect_id ="";
$(projtype).each(function() {
$(this.sect_id).hide();
if(this.value == thisVal) {
$(this.sect_id).show();
return false;
}
});
});
答案 0 :(得分:1)
$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#section-1011").hide();
var projtype = new Array({
value: 'Cars',
sect_id: 'fieldset#section-11'
}, {
value: 'Planes',
sect_id: 'fieldset#section-12'
}, {
value: 'Boats',
sect_id: 'fieldset#section-13'
});
$("select#1169").on('change', function() {
var thisVal = $(this).val();
$('fieldset[id!="mainSection"]').hide();
var sect_id = "";
$(projtype).each(function() {
if (this.value == thisVal) {
$(this.sect_id).show();
}
});
});
请参阅此DEMO
答案 1 :(得分:1)
从return false;
功能中删除each
。
此return
语句停止执行each
次迭代并停止隐藏其他字段集。
答案 2 :(得分:1)
删除return false;
。是否存在将其保留在那里的具体原因?
您更新的fiddle。