html and php load child select using parent select

i need some help in loading the child select based on the master select. Like i want to load the states based on the country select in the first place.

<div class="form-group">
<label for="customerID" class="col-sm-3 control-label">Customer</label>
<div class="col-sm-9">
<select class="form-control" name="countryName[]" id="countryrName">
<option value="">~~SELECT~~</option>
<?php
$countrySql = "SELECT * FROM countries WHERE transactionstatus='1' and companyid='1'";
$countryData = $connect->query($countrySql);

while($row = $countryData->fetch_array()) {                                            
echo "<option value='".$row['countryid']."' id='changeCustomer".$row['countryid']."'>".$row['countryname']."</option>";
} // /while 

?>

</select>
</div>
</div> <!--/form-group-->             
<div class="form-group">