select dependiente

[nelson12345]

Buenas noches. Estoy haciendo un select dependiente, si selecciono un valor en el primer select entonces en el segundo debe cargarse con los datos relacionados pero cuando doy guardar al formulario, en el segundo select me sale

Código:

Este valor no es válido.

como si no tuviera valores o los valores cargados no fueran validos pero no se por que

Mi controlador:

Código PHP:

public function addAction()
    {
        $ataque = new Ataque();
        $form = $this->createCreateForm($ataque);
        return $this->render('PPPCanBundle:Ataque:add.html.twig', array('form' => $form->createView()));
    }
 
    private function createCreateForm(Ataque $entity)
    {
        $form = $this->createForm(new AtaqueType(), $entity, array(
            'action' => $this->generateUrl('ppp_ataque_create'),
            'method' => 'POST'
            ));
        return $form;
    }
 
    public function createAction(Request $request)
    {
        $ataque = new ataque();
        $form = $this->createCreateForm($ataque);
        $form->handleRequest($request);
 
        if($form->isSubmitted() && $form->isValid())
         {
            $em = $this->getDoctrine()->getManager();
            $em->persist($ataque);
            $em->flush();
 
            $this->addFlash('mensaje', 'Mascota creada correctamente');
            return $this->redirectToRoute('ppp_ataque_index');
         }
 
        return $this->render('PPPCanBundle:Ataque:add.html.twig', array('form' => $form->createView()));
    }
 

Entidad:

Código PHP:

/**
     * @var string
     *
     * @ORM\Column(name="departamento", type="string", length=255)
     * @Assert\NotBlank()
     */
    private $departamento;
 
    /**
     * @var string
     *
     * @ORM\Column(name="municipio", type="string", length=255)
     * @Assert\NotBlank()
     */
    private $municipio;
 

Formulario:

Código PHP:

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('departamento','choice', array('choices'=> array(
                'color' => 'color',
                'country' => 'country'
                ), 'placeholder' => 'Selectccione una opcion...'))            
                   
->add('municipio', 'choice')
 

Vista add.html.twig

Código HTML:

<td>{{ form_label(form.departamento, ('Departamento')) }}
 
{{ form_widget(form.departamento, {'attr': {'class': 'form-control', 'id' : "primary"}}) }}
<span class="text-danger">{{ form_errors(form.departamento) }}</span>
</td>
 
<td>
    {{ form_label(form.municipio, ('Municipio')) }}
 
{{ form_widget(form.municipio, {'attr': {'class': 'form-control'}}) }}
<span class="text-danger">{{ form_errors(form.municipio) }}</span>
 

Archivo javascript que hace que cambie el segundo select dependiendo lo que se seleccione en el primero:

Código Javascript:

var options = {
        color : ["red","green","blue"],
        country : ["Spain","Germany","France"]
}
 
$(function(){
    var fillSecondary = function(){
        var selected = $('#departamento').val();
        $('#municipio').empty();
        options[selected].forEach(function(element,index){
            $('#municipio').append('<option value="'+element+'">'+element+'</option>');
        });
    }
    $('#departamento').change(fillSecondary);
    fillSecondary();
});