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中的View Source

<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()">

其次，您要比较所选选项的文字。查看您的选项，您需要检查value：

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

工作示例：

＆＃13;

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';
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

RGraham解决方案运作良好。

我在你的剧本上做了一个小小的工作。

这是一个简单的jsFiddle：http://jsfiddle.net/5ypkaxup/

对于Javascript，我确实简化了过程。

function changedSelect() {
        var selectedOption = document.getElementById("ip_select").value;
        document.getElementById("demo").innerHTML = "You selected: " + selectedOption;

        if(selectedOption == 'enable_iprule') {
            document.getElementById('ip').style.display = 'block';
            document.getElementById('qos').style.display = 'none';
        }
        else if (selectedOption == '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';
        }
      }

正如他所说，你需要为你的选择元素提供一个ID才能使它有效。

<select id="ip_select" name="ipqos" onchange="changedSelect();">

Javascript onchange不显示隐藏的div

2 个答案: