CakePHP中的国家/州下拉列表

// src/Model/Entity/Country.php
namespace App\Model\Entity;

use Cake\ORM\Entity;

class Country extends Entity
{
    protected $_accessible = [
        '*' => true,
        'id' => false
    ];
}

// src/Controller/CountriesController.php
public function getStates()
{
    $this->loadModel('Countries');
    $states = $this->Countries->find('list', ['keyField' => 'id', 'valueField' => 'state'])->where(['country' => $this->request->query('country')])->toArray();
    $this->set(compact('states'));
    $this->set('_serialize', ['states']);
}

// src/Model/Table/CountriesTable.php
public function getStates($country)
{
    return $this->find('list', ['keyField' => 'id', 'valueField' => 'state'])->where(['country' => $country])->toArray();
}

// src/Controller/CountriesController.php
public function getCountries()
{
    $this->loadModel('Countries');
    $countries = $this->Countries->find('list', ['keyField' => 'id', 'valueField' => 'country'])->toArray();
    $this->set(compact('countries'));
    $this->set('_serialize', ['countries']);
}

// src/Model/Table/CountriesTable.php
public function getCountries()
{
    return $this->find('list', ['keyField' => 'id', 'valueField' => 'country'])->toArray();
}

// src/Controller/CountriesController.php
public function index()
{
    $this->loadModel('Countries');
    $countries = $this->Countries->getCountries();
    $states = $this->Countries->getStates($this->request->query('country'));
    $this->set(compact('countries', 'states'));
    $this->set('_serialize', ['countries', 'states']);
}

// src/Template/Countries/index.ctp
<?= $this->Form->create() ?><fieldset>
   <legend><?= __('Select Country and State') ?></legend>
    <?= $this->Form->control('country', ['options' => $countries, 'empty' => true, 'onchange' => 'getStates()']) ?>
    <?= $this->Form->control('state', ['options' => $states, 'empty' => true]) ?>
</fieldset>
<?= $this->Form->end() ?><script>
function getStates() {
    var country = document.getElementById("country").value;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var states = JSON.parse(this.responseText);
            var stateSelect = document.getElementById("state");
            stateSelect.innerHTML = "";
            for (var state in states) {
                var option = document.createElement("option");
                option.value = state;
                option.text = states[state];
                stateSelect.add(option);
            }
        }
    };
    xhttp.open("GET", "/countries/getStates?country=" + country, true);
    xhttp.send();
}
</script>