Javascript onchange 不显示隐藏的 div

Question

我有一个下拉列表，我希望每次有人点击其中一个列表时，它都会显示一个隐藏的 div，我已经编写了这段代码，但由于某种原因它不起作用:

<?php

echo '<select name="ipqos" onchange="myFunction()">';
if ($enable_iprule[0]=='yes'){
    echo '<option value="enable_iprule" selected>Enable IP Rule';
}
else{
    echo '<option value="enable_iprule">Enable IP Rule';
}
if ($enable_qoshunter[8]=='yes'){
    echo '<option value="enable_qoshunter" selected>Enable QoS Hunter';
}
else{
    echo '<option value="enable_qoshunter">Enable QoS Hunter';
}
if ($enable_iprule[8]=='no' && $enable_qoshunter[0]=='no'){
    echo '<option value="disable_all" selected>Disable All';
}
else{
    echo '<option value="disable_all">Disable All';
}
echo '</select>';

echo "
<div id=\"ip\" style=\"display:none\">
<br><br>IP Rule :
<br><textarea name=\"ip_rule\" rows=\"2\"/>$ip_list[1]</textarea>
</div>
<div id=\"qos\" style=\"display:none\">
<br><br>QoS Target :
<br><textarea name=\"qos_target\" rows=\"2\"/>$qos_list[1]</textarea>
<script>
function myFunction() {
  var menu = document.getElementById('ipqos');
  if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
    document.getElementById('ip').style.display = 'block';
    document.getElementById('qos').style.display = 'none';
  }
  else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
    document.getElementById('qos').style.display = 'block';
    document.getElementById('ip').style.display = 'none';
  }
  else {
    document.getElementById('qos').style.display = 'none';
    document.getElementById('ip').style.display = 'none';
  }
}
</script>";
?>

我的脚本上没有收到任何错误消息，但由于某种原因，每次我单击菜单时，相应的隐藏 div 都不会显示我哪里出错了？

更新:这是 Google Chrome 中的查看源代码

<select name="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
<script>
function myFunction() {
  var menu = document.getElementById('ipqos');
  if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
    document.getElementById('ip').style.display = 'block';
    document.getElementById('qos').style.display = 'none';
  }
  else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
    document.getElementById('qos').style.display = 'block';
    document.getElementById('ip').style.display = 'none';
  }
  else {
    document.getElementById('qos').style.display = 'none';
    document.getElementById('ip').style.display = 'none';
  }
}
</script>

Answer 1

这一行:

var menu = document.getElementById('ipqos');

没有具有 ID ipqos 的元素。有一个元素具有该名称，但没有 ID。将其更改为:

<select name="ipqos" id="ipqos" onchange="myFunction()">

其次，您要比较所选选项的文本。查看您的选项，您希望改为检查值:

menu.options[menu.selectedIndex].value == 'enable_iprule'

工作示例:

function myFunction() {
  var menu = document.getElementById('ipqos');
  var val = menu.options[menu.selectedIndex].value;
  if (val == 'enable_iprule') {
    document.getElementById('ip').style.display = 'block';
    document.getElementById('qos').style.display = 'none';
  }
  else if (val == 'enable_qoshunter') {
    document.getElementById('qos').style.display = 'block';
    document.getElementById('ip').style.display = 'none';
  }
  else {
    document.getElementById('qos').style.display = 'none';
    document.getElementById('ip').style.display = 'none';
  }
}

<select name="ipqos" id="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>