Javascript 从另一个选择框动态填充选择框的值

我有两个可选择的选项，分别是

国家

和

州

。使用

php

函数从数据库填充选项值。我想根据

国家的选择填充
州
。例如，如果我从
国家选择美国
，则
州
选择选项将填充我所有属于美国国家的
州

这是我的密码-

<select id="countryName" name="countryName" onChange="getCountryCode()">
    <option value=""></option>
    <?php $countries = $location->getCountries();
         foreach ($countries as $country) {
             echo '<option value="' . $country->id . '">' . $country->name . '</option>';
         }
    ?>                                        
</select>

在所有这些之后，我试图使用php函数
getStates（$countryCode）
获取所选
国家的
状态。但是我不知道如何将
javascript
变量传递给
php
函数

<select name="stateName">
     <option value=""></option>
     <?php $states = $location->getStates($countryCode);
          foreach ($states as $state) {
              echo '<option value="' . $state->id . '">' . $state->name . '</option>';
          }
     ?>
</select>



是否有人知道如何将javascript变量传递给php，或者如果有更好的想法，请分享

谢谢大家!
 目前，您将JavaScript代码（客户端）与PHP代码（服务器端）混合使用。那是不可能的。在您将内容发送到浏览器之后，php必须等待，直到用户采取某种操作再次调用服务器。在您的情况下，有两种可能的解决方案

使用AJAX从服务器获取状态选择框的内容。一种方法可以是一个简单的php脚本，它只打印状态：
PHP脚本

$states = $location->getStates($_GET['state']);
foreach ($states as $state) {
    echo '<option value="' . $state->id . '">' . $state->name . '</option>';
}

没有ajax的另一个解决方案是始终打印所有状态，并根据国家/地区选择框的值显示/隐藏它们
PHP脚本

$states = $location->getAllStates();
foreach ($states as $state) {
    echo '<option data-country="{$state->country}" value="{$state->id}">{$state->name}</option>';
}

为此，您应该使用Ajax，将它的调用绑定到（'change'）
事件上的
。谢谢您的评论，您是否介意与一些示例共享它。很抱歉，我不擅长javascript或Ajax。我建议大家通读一下，其中还提到了另一篇文章，这篇文章应该能让你到达终点。
$('#countryName').on('change', function() {
    $.ajax({
        url: 'states.php',
        data: { state: $(this).val() },
        type: 'GET',
        success: function(data) {
            $('select[name="stateName"]').html(data);
        }
    });
});

$states = $location->getAllStates();
foreach ($states as $state) {
    echo '<option data-country="{$state->country}" value="{$state->id}">{$state->name}</option>';
}

$(function() {
    var $statesSelect = $('select[name="stateName"]');
    var $states = $('option', $statesSelect);
    // first remove all elements from dom
    $states.detach();
    // and then listen to change event and show/hide them
    $('#countryName').on('change', function() {
        var val = $(this).val();
        $('option', $statesSelect).detach();
        $states.each(function() {
            $(this).is('[data-country="' + val + '"').appendTo($statesSelect);
        });
    });
});