Dependent Dropdown box CakePHP 3

Question

Я создал таблицу стран, городов и клиентов, и я стараюсь, чтобы при добавлении нового клиента из раскрывающегося списка я мог выбрать страну, а затем город, имеющий отношение к этой стране. В настоящее время я не могу выбрать любую комбинацию городов и стран из раскрывающегося списка. Это моя база данных

CREATE TABLE IF NOT EXISTS `southpac_team`.`customers` (
    `id` INT NOT NULL, 
    `name` VARCHAR(100) NULL, 
    `country_id` INT NULL, 
    `city_id` INT NULL, 
    `address` VARCHAR(255) NULL, 
    `postal_address` VARCHAR(255) NULL, 
    `phone` VARCHAR(45) NULL, 
    `email` VARCHAR(100) NULL, 
    `payment_terms_id` INT NULL, 
    `stop_credit` TINYINT(1) NULL, 
    `gst_percentage` INT NULL, 
    `currency` VARCHAR(45) NULL, 
    `account_closed` TINYINT(1) NULL, 
    `invoice_email` VARCHAR(100) NULL, 
    `customer_notes` VARCHAR(255) NULL, 
    PRIMARY KEY (`id`)) 
ENGINE = InnoDB; 

CREATE TABLE IF NOT EXISTS `southpac_team`.`countries` (
    `id` INT NOT NULL AUTO_INCREMENT, 
    `name` VARCHAR(100) NULL, 
    PRIMARY KEY (`id`)) 
ENGINE = InnoDB; 

CREATE TABLE IF NOT EXISTS `southpac_team`.`cities` (
    `id` INT NOT NULL AUTO_INCREMENT, 
    `country_id` INT NOT NULL, 
    `name` VARCHAR(100) NULL, 
    PRIMARY KEY (`id`)) 
ENGINE = InnoDB; 

Я использовал торт Выпекать для создания связей между таблицами, это мой контроллер клиента.

<?php 
namespace App\Controller; 

use App\Controller\AppController; 

/** 
* Customers Controller 
* 
* @property \App\Model\Table\CustomersTable $Customers 
*/ 
class CustomersController extends AppController 
{ 

    /** 
    * Index method 
    * 
    * @return \Cake\Network\Response|null 
    */ 
    public function index() 
    { 
     $this->paginate = [ 
      'contain' => ['Countries', 'Cities', 'PaymentTerms'] 
     ]; 
     $customers = $this->paginate($this->Customers); 

     $this->set(compact('customers')); 
     $this->set('_serialize', ['customers']); 
    } 

    /** 
    * View method 
    * 
    * @param string|null $id Customer id. 
    * @return \Cake\Network\Response|null 
    * @throws \Cake\Datasource\Exception\RecordNotFoundException When record not found. 
    */ 
    public function view($id = null) 
    { 
     $customer = $this->Customers->get($id, [ 
      'contain' => ['Countries', 'Cities', 'PaymentTerms'] 
     ]); 

     $this->set('customer', $customer); 
     $this->set('_serialize', ['customer']); 
    } 

    /** 
    * Add method 
    * 
    * @return \Cake\Network\Response|null Redirects on successful add, renders view otherwise. 
    */ 
    public function add() 
    { 
     $customer = $this->Customers->newEntity(); 
     if ($this->request->is('post')) { 
      $customer = $this->Customers->patchEntity($customer, $this->request->data); 
      if ($this->Customers->save($customer)) { 
       $this->Flash->success(__('The customer has been saved.')); 

       return $this->redirect(['action' => 'index']); 
      } 
      $this->Flash->error(__('The customer could not be saved. Please, try again.')); 
     } 
     $countries = $this->Customers->Countries->find('list', ['limit' => 200]); 
     $cities = $this->Customers->Cities->find('list', ['limit' => 200]); 
     $paymentTerms = $this->Customers->PaymentTerms->find('list', ['limit' => 200]); 
     $this->set(compact('customer', 'countries', 'cities', 'paymentTerms')); 
     $this->set('_serialize', ['customer']); 
    } 

    /** 
    * Edit method 
    * 
    * @param string|null $id Customer id. 
    * @return \Cake\Network\Response|null Redirects on successful edit, renders view otherwise. 
    * @throws \Cake\Network\Exception\NotFoundException When record not found. 
    */ 
    public function edit($id = null) 
    { 
     $customer = $this->Customers->get($id, [ 
      'contain' => [] 
     ]); 
     if ($this->request->is(['patch', 'post', 'put'])) { 
      $customer = $this->Customers->patchEntity($customer, $this->request->data); 
      if ($this->Customers->save($customer)) { 
       $this->Flash->success(__('The customer has been saved.')); 

       return $this->redirect(['action' => 'index']); 
      } 
      $this->Flash->error(__('The customer could not be saved. Please, try again.')); 
     } 
     $countries = $this->Customers->Countries->find('list', ['limit' => 200]); 
     $cities = $this->Customers->Cities->find('list', ['limit' => 200]); 
     $paymentTerms = $this->Customers->PaymentTerms->find('list', ['limit' => 200]); 
     $this->set(compact('customer', 'countries', 'cities', 'paymentTerms')); 
     $this->set('_serialize', ['customer']); 
    } 

    /** 
    * Delete method 
    * 
    * @param string|null $id Customer id. 
    * @return \Cake\Network\Response|null Redirects to index. 
    * @throws \Cake\Datasource\Exception\RecordNotFoundException When record not found. 
    */ 
    public function delete($id = null) 
    { 
     $this->request->allowMethod(['post', 'delete']); 
     $customer = $this->Customers->get($id); 
     if ($this->Customers->delete($customer)) { 
      $this->Flash->success(__('The customer has been deleted.')); 
     } else { 
      $this->Flash->error(__('The customer could not be deleted. Please, try again.')); 
     } 

     return $this->redirect(['action' => 'index']); 
    } 
} 

и это мой клиент add.ctp

<?php 
/** 
    * @var \App\View\AppView $this 
    */ 
?> 
<nav class="large-3 medium-4 columns" id="actions-sidebar"> 
    <ul class="side-nav"> 
     <li class="heading"><?= __('Actions') ?></li> 
     <li><?= $this->Html->link(__('List Customers'), ['action' => 'index']) ?></li> 
     <li><?= $this->Html->link(__('List Countries'), ['controller' => 'Countries', 'action' => 'index']) ?></li> 
     <li><?= $this->Html->link(__('New Country'), ['controller' => 'Countries', 'action' => 'add']) ?></li> 
     <li><?= $this->Html->link(__('List Cities'), ['controller' => 'Cities', 'action' => 'index']) ?></li> 
     <li><?= $this->Html->link(__('New City'), ['controller' => 'Cities', 'action' => 'add']) ?></li> 
     <li><?= $this->Html->link(__('List Payment Terms'), ['controller' => 'PaymentTerms', 'action' => 'index']) ?></li> 
     <li><?= $this->Html->link(__('New Payment Term'), ['controller' => 'PaymentTerms', 'action' => 'add']) ?></li> 
    </ul> 
</nav> 
<div class="customers form large-9 medium-8 columns content"> 
    <?= $this->Form->create($customer) ?> 
    <fieldset> 
     <legend><?= __('Add Customer') ?></legend> 
     <?php 
      echo $this->Form->input('name'); 
      echo $this->Form->input('country_id', ['options' => $countries, 'empty' => true]); 
      echo $this->Form->input('city_id', ['options' => $cities, 'empty' => true]); 
      echo $this->Form->input('address'); 
      echo $this->Form->input('postal_address'); 
      echo $this->Form->input('phone'); 
      echo $this->Form->input('email'); 
      echo $this->Form->input('payment_terms_id', ['options' => $paymentTerms, 'empty' => true]); 
      echo $this->Form->input('stop_credit'); 
      echo $this->Form->input('gst_percentage'); 
      echo $this->Form->input('currency'); 
      echo $this->Form->input('account_closed'); 
      echo $this->Form->input('invoice_email'); 
      echo $this->Form->input('customer_notes'); 
     ?> 
    </fieldset> 
    <?= $this->Form->button(__('Submit')) ?> 
    <?= $this->Form->end() ?> 
</div> 

Я могу создавать новых клиентов и выбора страны и цитирует я просто хочу ограничить падение коробки, так что я могу выбрать только город для правильная страна. Я попытался исследовать это, но натолкнулся на примеры с помощью jshelper, который не включает в себя cakephp 3.0. Спасибо.

Answer 1

Вы можете попробовать Прикованный Selects плагин для JQuery Chained Selects Plugin for jQuery and Zepto

Требуемые Исходные файлы:

ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
jquery.chained.min.js

Пример:

$(document).ready(function() { 
    $("#cityId").chained("#countryId"); 
});