html and php or js select using query with relative field

Hi i have a customer and customer locations. When i select a customer i want to load the related customer location in another select. how can i do that using html and php

Thank you for your inputs. I think i missed out on something. the customer will have multiple location as their shipment address. the data will be in "SELECT * FROM customerlocations WHERE transactionstatus='1' and customerid='1' " i want to pass the customer id selected in the first select field to this to get all their location to be selected by the user.

<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="customerName[]" id="customerName" onchange="getCustomerData()" >
<option value="">~~SELECT~~</option>
<?php
$customerSql = "SELECT * FROM customers WHERE transactionstatus='1' and companyid='1'";
$customerData = $connect->query($customerSql);

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

?>

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

Solution

I use php,html and jquery ajax to load customer location data on select input when user change the select dropdown .This is my Index.php file.

<?php
define('server','localhost');
define('user','root');
define('pwd','');
define('dbname','customer');
$conn=mysqli_connect(server,user,pwd,dbname);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>
<body>
<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="customerName[]" id="customerName" onchange="getCustomerData()" >
<option value="">select</option>
<?php
$customerSql = "SELECT * FROM customer";
$customerData = mysqli_query($conn,$customerSql);

while($row = mysqli_fetch_array($customerData)) {                                            
echo "<option value='".$row['id']."' id='changeCustomer".$row['id']."'>".$row['name']."</option>";
} 

?></select>
</div>
</div> 
<!--/form-group-->             
<div class="form-group">
<label for="customerAddress" class="col-sm-3 control-label">Customer Address</label>
<div class="col-sm-9">
<select class="form-control" name="customerAddress[]" id="customerAddress">
<option value="">select</option>
</select>
</div></div>
<script>
    function getCustomerData(){        
            var a=$('#customerName').val();
              $.ajax({
                url:'customer.php',
                type:'Post',
                data:{id:a},
                success:function(data){
                    $('#customerAddress').html(data);
                }
            })
            
        }
</script>

</body>
</html>

customer.php looks like

<?php
define('server','localhost');
define('user','root');
define('pwd','');
define('dbname','customer');
$conn=mysqli_connect(server,user,pwd,dbname);
$id=$_POST['id'] ? $_POST['id'] :0;
$sql="select * from customer where id=$id";
$result=mysqli_query($conn,$sql);
$output='';
if(mysqli_num_rows($result)>0){
while($row=mysqli_fetch_assoc($result)){
    $output.= "<option value='".$row['id']."''>".$row['address']."</option>";
}}else{
    $output.='<option value="">select</option>';
}
echo $output;
?>