My goal is to show a second **"select"** in a **"div"** with options depending on the selection made by the user on the first **"select"**.

The first **"select"** is a list of regions, while the second is the list of provinces in the forementioned region.

The function **'change'** should update the div **'province'**, passing a value to another php file used for determining the provinces, with the second select but that doesn't happen.

Main page:

```
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
       function change(value) {
            $('province').load('select.php?id='+ value);
       }
   </script>

   <body>
      <div>
         <select  onchange="change.call(this.value)">
            <?php
              for($i=0;$i<count($region);$i++)
              {
                      echo "<option value=".$i.">".$region[$i]."</option>";
              }

            ?>
         </select>
      </div>
      <div id="province"></div>
    </body>
</html>

```

Script for updating:

```
 <?php
 $vector=array(1 =>array("CH","AQ","PE","TE"),
               2 => array("MT","PZ"),
               3 => array("CZ","CS","KR","RC","VV"));
 $id = $_GET['id'];
 if($id==0)
 {
     echo "";
 }
else{

   for($i=1;$i<(count($vector)+1);$i++)
   {
       $n=key($vector)
       if($n==$i)
       {
           echo "<select>";
           $content=current($vector);
           for($k=0;$k<count($content);$k++)
           {
             echo "<option>".$content[$k]."<option>";  
           }
           echo "</select>";
           break;
       }
       else
       {
           next($vector);
       }
   }
}
?>

```