how can i create two connected list on same web page? [duplicate]

I want two list in the same page. First list will be load while page loading. Every item in this list has a value, i want whenever user choose another item (and another value automaticlly) second list will be loaded.how can i do this via using javascript and php?

example

1. schools
2. hospitals

if it choose schools(1) second list must be loaded with school names.

note:i have 2 table on mysql. all i want you to write the website codes.

<select id="first" >
    <?php
$con=mysqli_connect("localhost","root","","cau");


$result = mysqli_query($con,"SELECT id, main FROM first");

while($row = mysqli_fetch_array($result))
  {
  echo "<option value=\"".$row['id']."\">".$row['main']."</option>";
  }     

mysqli_close($con);
   ?>
</select>


<select>

     //how can i load this second list as i said
</select>