Question

我有两个选择Countries和States的选项。使用php函数从数据库填充选项值。我想根据States的选择填充Countries。例如，如果我从Countries选择美国，则States选择选项将填充所有States所属的美国国家/地区。

这是我的代码 -

<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>

我可以使用javascript函数

获取所选的国家/地区值

<script type="text/javascript">
     function getCountryCode(){
         var countryCode = document.getElementById('countryName').value;
     }
</script>

毕竟，我试图使用php函数States获取所选Country的{{1}}。但我不知道如何将getStates($countryCode)变量传递给javascript函数。

php

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

谢谢！

Answer 1

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

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

PHP脚本

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

Javascript（使用jQuery）

$('#countryName').on('change', function() {
    $.ajax({
        url: 'states.php',
        data: { state: $(this).val() },
        type: 'GET',
        success: function(data) {
            $('select[name="stateName"]').html(data);
        }
    });
});

没有ajax的另一种解决方案是始终打印所有状态并显示/隐藏它们与您所在国家/地区选择框的值相关

PHP脚本

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

JavaScript（使用jQuery）

$(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);
        });
    });
});

从另一个选择框

1 个答案: