No se limpia segundo select: a tráves select dependiente mediantes eventos

Estimados

Tengo una duda.

Tengo select dependiente mediante eventos (Fuente).

Cada area tiene definido N cargos asociados. Antes tenia definido en el formulario que era obligatorio seleccionar un cargo, ahora no.

Cuando selecciono un area se actualiza el segundo select con los cargos relacionado con el área. Al cambiar de area, tambien se actualiza los cargos, el pero es que todavia existen los cargos de area anteriormente seleccionado.

La idea era que solo cargara en el select, los cargos relacionados.

Este codigo captura el id del area y llama al action que retorna los cargos asociados.

$(function () {
        $("#select_area").change(function () {
            var data = {
                area_id: $(this).val()
            };
 
            $.ajax({
                type: 'post',
                url: '{{ path("app_select") }}',
                data: data,
                success: function (data) {
                    var $area_selector = $('#select_cargo');                                                                
                    for (var i = 0, total = data.length; i < total; i++) {
                        $area_selector.append('<option value="' + data[i].id + '">'+"-" + data[i].nombre + '</option>');
                    }
                }
            });            
        });
    });

Action que retorna cargos

public function cargoAction(Request $request)
{
        $solicitante = ...
        $area_id = $request->request->get('area_id');
 
        $em = $this->getDoctrine()->getManager();  
        $qb = $em->getRepository('AppBundle:Cargo')->createQueryBuilder('c')
            ->where('a.id = :area_id')
            ->andWhere('c.estado = :estado')            
            ->join('c.area', 'a')
            ->orderBy('c.nombre', 'ASC')
            ->setParameter('estado', 1)
            ->setParameter('area_id', $area_id);
 
        if (!$this->get('security.context')->isGranted('ROLE_CT_VISTA'))
        {
            $relacionado = $em->getRepository('PersonalBundle:CargoDetalle')->findJefeToEmpleado($solicitante->getCargo()->getId());
            $qb->andWhere('c.id IN (:relacionado)')->setParameter('relacionado', $relacionado);
        }        
 
        $cargos = $qb->getQuery()->getResult();
 
        $data = array();
        $i = 0;
        foreach ($cargos as $cargo)
        {
            $data[$i]['id'] = $cargo->getId();
            $data[$i]['nombre'] = $cargo->getNombre();            
            $i++;
        }
 
        $response = new JsonResponse();
        $response->setData($data);
 
        return $response;
    }

Despues ya seleccionado y enviado los datos del formulario se limpia el select y carga solo los cargos del area (los cuales son enviados por el formulario, no action.)

y si vuelvo a seleccionar otra area vuelve susceder lo mismo, que no se limpia el select con los datos antiguos.

ME podrian orientar.

Respuestas

#1

Hola @dariongg,

Lo que se me ocurre es que una vez envíes el formulario borres el campo con jQuery.

Saludos,

@miguelplazasr

12 julio 2016, 6:00

#2

Hola @miguelplazasr

La solución que encontre esta escrita entre INICIO/FIN.

<script>
    $(function () {
        $("#organizacion_area").change(function () {
            var data = {
                area_id: $(this).val()
            };
 
            $.ajax({
                type: 'post',
                url: '{{ path("intranet_control_tiempo_select") }}',
                data: data,                
                success: function (data) {
                    var $area_selector = $('#organizacion_cargo');                                             
 
                // INICIO: Limpia el select 
                $area_selector
                    .find('option')
                    .remove()
                    .end()
                    .append('<option value="">Todos</option>')
                ;
                // FIN    
                    for (var i = 0, total = data.length; i < total; i++) {
                        $area_selector.append('<option value="' + data[i].id + '">' + data[i].nombre + '</option>');
                    }
                }
            });            
        });
    });
 
</script>

Al revizar el cotenido del la variable data, solo tendria los valores que deberia ir en el select.

Gracias.

@dariongg

12 julio 2016, 15:23