Javascript onchange doesn't show hidden div

Question

I have a drop down list and I want every time someone clicks on one of the list, it shows a hidden div, I've written this code but for some reason it doesn't work:

<?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>";
?>

I don't get any error messages on my script but for some reason every time I click on a menu, the corresponding hidden div doesn't show up Where did I go wrong?

UPDATE: This is the View Source from 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

RGraham solutions works perfectly.

I did a small work arround on your script.

Here is a simple jsFiddle : http://jsfiddle.net/5ypkaxup/

For the Javascript, I did simplify the process a little bit.

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

As he told, you need to give an ID to your select element to make it works.

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

Answer 2

This line:

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

There is no element with ID ipqos. There is an element with that name, but not an ID. Change it to:

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

Second, you're comparing the text of the selected option. Looking at your options, you want to be checking the value instead:

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

Working example:

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>