2 level sql php javascript dropdown

Question

I'm trying to make a 2 level drop down menu, where you select the state and then the second dropdown will populate all the parks within that state. Hitting submit, will take you to that individual park page.

I think there's a problem with the way the IDs are being set up.

Example of the parklist table in the sql database

<SCRIPT language=JavaScript>
<!--
function reload(form)
{
var val=form.p_name.options[form.p_name.options.selectedIndex].value;
self.location='dd-mysqli.php?p_name=' + val ;
}

<?Php


$query2="SELECT DISTINCT state FROM parklist ORDER BY state ASC"; 



echo "<form method=post statename=f1 action='../pages/individualpark.php?id=$parkid'>";

echo "<select statename='state' onchange=\"reload(this.form)\"><option value=''>Select State</option>";
if($stmt = $connection->query("$query2")){
  while ($row2 = $stmt->fetch_assoc()) {
  if($row2['id']==@$parkid){echo "<option selected value='$row2[id]'>$row2[state]</option>";}
else{echo  "<option value='$row2[id]'>$row2[state]</option>";}

  }
}else{
echo $connection->error;
}

echo "</select>";




echo "<select parkname='parkname'><option value=''>Select Park</option>";
if(isset($parkid) and strlen($parkid) > 0){
if($stmt = $connection->prepare("SELECT id, p_name, state FROM parklist where id=$parkid order by p_name ASC")){
$stmt->bind_param('i',$parkid);
$stmt->execute();
 $result = $stmt->get_result();
 while ($row1 = $result->fetch_assoc()) {
  echo  "<option value='$row1[p_name]'>$row1[p_name]</option>";
  }

}else{
 echo $connection->error;
} 


}else{

$query="SELECT id, p_name, state FROM parklist order by p_name ASC"; 

if($stmt = $connection->query("$query")){
  while ($row1 = $stmt->fetch_assoc()) {
  
echo  "<option value='$row1[p_name]'>$row1[p_name]</option>";

  }
}else{
echo $connection->error;
}