Update State, City dropdown base on Country Select Symfony

Question

I have this releationship. One to Many Between Country to State. One to Many Between State to City.

On Employment Form, I have to show these dropdown, i want when i select a country, only it's releated states are shown. Now it is showing all.

here is my form code.

<?php

namespace PNC\UsersBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\FormBuilder;
use Doctrine\ORM\EntityRepository;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\Form\Event\DataEvent;

class EmploymentsType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder ->add('designation', 'text', array(
                    'required' => true,
                    'label' => 'Designation ',
                    'attr' => array(
                        'required'    => true,
                        'placeholder' => 'Designation Name',
                        'invalid_message' => 'You entered an invalid designation',
                        'class' => 'form-control'
                    )))
                    ->add('organization', 'text', array(
                    'label' => 'Organization',
                    'attr' => array(
                    'required'    => true,
                    'placeholder' => 'Organization Name',
                    'invalid_message' => 'You entered an invalid organization',
                    'class' => 'form-control'
                    )))
                    ->add('country', 'entity', array(
                        'label' => ucfirst('country'),
                        'class' => 'PNCGeneralBundle:Country',
                        'property'=>'name',
                        //'property_path'=>false, //Country is not directly related to City
                        'attr'=> array(
                            'required'    => true,
                            'invalid_message' => 'You selected an invalid Industry',
                            'class' => 'form-control'
                        )
                    ))
                    ->add('state', 'entity', array(
                        'label' => ucfirst('state'),
                        'class' => 'PNC\GeneralBundle\Entity\State',
                        'attr'=> array(
                            'required'    => true,
                            'invalid_message' => 'You selected an invalid Industry',
                            'class' => 'form-control'
                        )
                    ))
                    ->add('city', 'entity', array(
                        'label' => ucfirst('city'),
                        'class' => 'PNC\GeneralBundle\Entity\City',
                        'attr'=> array(
                            'required'    => true,
                            'invalid_message' => 'You selected an invalid Industry',
                            'class' => 'form-control'
                        )
                    ))
                    ->add('save', 'submit', array(
                        'attr' => array(
                            'label' => ucfirst('save'),
                            'class' => 'btn btn-success'
                        )
                    ));
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'PNC\UsersBundle\Entity\Employments',
        ));
    }

    public function getName()
    {
        return 'pncusers_bundle_employments_type';
    }
}

Answer 1

I'd say that the easiest way would be to show/hide options via JavaScript. Dump countries, states and cities as JSON and use that as source for decision making in JS.