如何根据下拉选择显示特定ID并隐藏其他ID

Question

请提供帮助。我需要显示一个文本字段，并根据下拉选择隐藏另一个文本域。我的问题是只显示第一个文本字段。此外，如果我进行其他选择，文本字段不会隐藏。非常感谢！！：(

这是我的脚本：

<script>
function showHide() {
let MyChoice = document.getElementsByName('xactivitytype');
if (MyChoice.value = 'SIM Replacement') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value = 'Change Of Plan') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value = 'Replacement Of Issued Unit') {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'block';
} else {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'none';
}
}
</script>

HTML:

<!--- NEED TO SELECT FIRST HERE ----->
<select name="xcategory" id="dbType" style="font-size:11px;font-family:Tahoma;color:#22215b;font-weight:bold;">
<option value="Admin">Admin
<option value="Contractors">Contractors
</select><font color="red">*</font>
<!--- DROPDOWN WILL DEPEND ON THE SELECTION ABOVE ----->
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Admin">
<option value="New Activation">New Activation</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Change Of Plan">Change Of Plan</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
<option value="Non-Service Related Concerns">Non-Service Related Concerns</option>
</select>
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Contractors">
<option value="">Please select</option>
<option value="New Activation/New Handset">New Activation/New Handset</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
</select>

<tr id="hidden-panel"><td width="240" align="right" valign="top" style="padding-right:10px;"><b>Service Number:</b></td><td width="750">
<input type="text" name="xServiceNumber">
</td></tr>
<tr id="hidden-panel2"><td width="240" align="right" valign="top" style="padding-right:10px;"><b>IMSI:</b></td><td width="750">
<input type="text" name="xIMSI">
</td></tr>

CSS：

<style>
#hidden-panel {
display: none;
}
#hidden-panel2 {
display: none;
}
</style>

Answer 1

我在您的代码中看到了两个错误。

1. let MyChoice = document.getElementsByName('xactivitytype');这里的getElementsByName方法返回一个数组，因此您需要执行document.getElementsByName('xactivitytype')[0]或document.getElementsByName('xactivitytype')[1]

2. 在if else-if块中，您使用的是赋值运算符=，而不是比较运算符===。

下面是一个我提到的修复示例。

function showHide() {
const idx = document.getElementById('dbType').selectedIndex ;
const MyChoice = document.getElementsByName('xactivitytype')[idx];
if (MyChoice.value === 'SIM Replacement') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value === 'Change Of Plan') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value === 'Replacement Of Issued Unit') {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'block';
} else {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'none';
}
}

<style>
#hidden-panel {
display: none;
}
#hidden-panel2 {
display: none;
}
</style>

<!--- NEED TO SELECT FIRST HERE ----->
<select name="xcategory" id="dbType" style="font-size:11px;font-family:Tahoma;color:#22215b;font-weight:bold;">
<option value="Admin">Admin
<option value="Contractors">Contractors
</select><font color="red">*</font>
<!--- DROPDOWN WILL DEPEND ON THE SELECTION ABOVE ----->
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Admin">
<option value="New Activation">New Activation</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Change Of Plan">Change Of Plan</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
<option value="Non-Service Related Concerns">Non-Service Related Concerns</option>
</select>
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Contractors">
<option value="">Please select</option>
<option value="New Activation/New Handset">New Activation/New Handset</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
</select>
<table>
<tr id="hidden-panel">
<td width="240" align="right" valign="top" style="padding-right:10px;">
<b>Service Number:</b></td><td width="750">
<input type="text" name="xServiceNumber">
</td>
</tr>
<tr id="hidden-panel2">
<td width="240" align="right" valign="top" style="padding-right:10px;">
<b>IMSI:</b>
</td>
<td width="750">
<input type="text" name="xIMSI">
</td>
</tr>
</table>

Answer 2

必须使用==或===来比较值，而不仅仅是=。在您的情况下，您甚至应该使用switch语句。

Answer 3

首先您遇到了等式运算符的问题。请注意，=用于赋值，==用于相等性检查。

另一个问题是document.getElementsByName('xactivitytype')返回Array of NodeList，您需要使用index来获得值，例如：

function showHide() {
let MyChoice = document.getElementsByName('xactivitytype');
if (MyChoice[0].value == 'SIM Replacement') {
....
}
...
}