我正在使用下面的 javascript 代码隐藏/基于所选项目类型的部分。下面数组中的值是从保管箱中选择的值。下面的id是section / fieldset id [我知道它们是数字，但这就是我们获取应用程序的方式，所以现在坚持使用它]。我希望有这样的多个值：
值：“广告”，价值：“宣传册”，价值：“巴士包裹”
基本上我想说：如果值等于Ad 或宣传册或 Bus Wrap，则显示ID为838.我无法获取这个工作。如何将“或”运算符合并到此代码中？
//Project Types
var projectTypes = new Array (
{id : '838', value: 'Ad'},
{id : '838', value: 'Cars'},
{id : '839', value: 'Brochure'},
{id : '839', value: 'Planes'},
{id : '840', value: 'Bus Wrap'},
{id : '840', value: 'Boats'}
);
refreshSections(project_type);
function refreshSections(selectedType)
{
for (var i = 0; i < projectTypes.length; i++)
{
if (projectTypes[i].value == selectedType)
{
document.getElementById("section-"+ projectTypes[i].id).style.display = '';
}
else
{
document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}
}
}
以下是我想要完成的HTML示例：
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Project Overview</title>
<script type="text/javascript">
var projectType_Field_Id = '1169';
//Project Types
var projectTypes = new Array (
{id : '11', value:'Cars'},
{id : '12', value:'Boats'},
{id : '13', value:'Planes'}
);
//occurs onLoad
function formOnLoad()
{
var project_type = document.getElementById(projectType_Field_Id).value;
refreshSections(project_type);
}
/*
* Onchange - Project Type
*/
function projectTypeChange()
{
var project_type = document.getElementById(projectType_Field_Id).value;
refreshSections(project_type);
}
function refreshSections(selectedType)
{
for (var i = 0; i < projectTypes.length; i++)
{
if (projectTypes[i].value == selectedType)
{
document.getElementById("section-"+ projectTypes[i].id).style.display = '';
} else {
document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
}
}
}
</script>
</head>
<body onload="formOnLoad();">
<form method="post" action="">
<fieldset name="mainSection">
<legend style="color:blue; font-weight:bold">Project Overview Section</legend>
<table style="width: 100%">
<tr>
<td style="height: 33px; width: 178px; color:maroon">Name</td>
<td style="height: 33px"><input id="1125" name="1125" type="text" /></td>
</tr>
<tr>
<td style="height: 33px; width: 178px; color:maroon">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" onChange="projectTypeChange();">
<option value="">Select</option>
<option value="Cars">Cars</option>
<option value="Boats">Boats</option>
<option value="Planes">Planes</option>
<option value="Trains">Trains</option>
<option value="Skateboard">Skateboard</option>
<option value="Helicopter">Helicopter</option>
</select></td>
</tr>
</table>
</fieldset><br /><br />
<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 style="color:maroon">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-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 style="color:maroon">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-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 style="color:maroon">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-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>
<input name="Send Job" type="submit" value="Send Job" />
</form>
答案 0 :(得分：1)
看起来在你的for循环中，你只需要检查selectedType是否匹配projectTypes之一。试试这个 -
for (var i = 0; i < projectTypes.length; i++)
{
if (projectTypes[i].value == selectedType)
{
document.getElementById("section-"+ projectTypes[i].id).style.display = '';
break;
}
}
这只会在匹配项目类型时显示您的元素，然后在匹配后立即退出循环。