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

【问题标题】：Populate the values of select boxes dynamically from another select box从另一个选择框动态填充选择框的值
【发布时间】：2017-06-03 04:45:18
【问题描述】：

我有两个选择选项Countries 和States。选项值使用php 函数从数据库中填充。我想根据Countries 的选择填充States。例如，如果我从 Countries 中选择 US，则 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 函数 getStates($countryCode) 获取所选 Country 的 States。但我不知道如何将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，或者如果有比这更好的想法，请分享。

谢谢！

【问题讨论】：

您应该为此使用 Ajax，将其调用绑定到 .on('change') 事件。
感谢您的cmets，您介意与一些例子分享。抱歉，我不擅长 javascript 或 Ajax。
我建议您通读 stackoverflow.com/questions/13840429/… 它还引用了另一篇帖子 stackoverflow.com/questions/23740548/…，它们一起应该可以让您到达终点。

标签： javascript php

【解决方案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);
        });
    });
});

【讨论】：