javascript - Multiple nested dropdown menu from MySQL -

i have following php page 4 dropdown list correctly populated 4 differents mysql query. populate categories_2 through query depending on categories_1.c_id , same nested others dropdown.

tried call myfunction() onchange seems not working. don't alert.

does know how this? appreciated.

i know have use mysqli it's existing page , later.

<script> var mydropdown=document.getelementsbyname('cat1')[0]; function myfunction(){     alert('option changed : '+mydropdown.value); } </script>    <form enctype="multipart/form-data" method="post" action="import.php">          <label for="cat_name">categories_1</label>         <select name = "cat1" onchange="myfunction()">         <?php             $s = mysql_query("select * `categories_1`");             while($row = mysql_fetch_assoc($s)) {             echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); } ?>         </select>         <br>                      <label for="cat_nam">categories_2</label>         <select>         <?php             $s = mysql_query("select c_name `categories_2`");             while($row = mysql_fetch_assoc($s)) {             echo ('<option value="0">' . $row['c_name'] . '</option>'); }            ?>         </select>         <br>                      <label for="cat_nae">categories_3</label>         <select>         <?php             $s = mysql_query("select c_name `categories_3`");             while($row = mysql_fetch_assoc($s)) {             echo ('<option value="0">' . $row['c_name'] . '</option>'); } ?>         </select>         <br>                      <label for="cat_ame">categories_4</label>         <select>         <?php             $s = mysql_query("select c_name `categories_4`");             while($row = mysql_fetch_assoc($s)) {             echo ('<option value="0">' . $row['c_name'] . '</option>'); }            ?>         </select> 

this wrong method call dropdoen value

var mydropdown=document.getelementsbyname('cat1')[0]; 

your myfunction be

<script> function myfunction(){ var mydropdown=document.getelementbyid('cat1');   var mydropdowval= mydropdown[mydropdown.selectedindex].value;    alert(mydropdowval); } </script> 

here assign id id="cat1" dropdown

 <select name = "cat1" id="cat1" onchange="myfunction()">     <?php     $s = mysql_query("select * `categories_1`");     while ($row = mysql_fetch_assoc($s)) {         echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>');     }     ?> </select>