viernes, 12 de agosto de 2011

Agregar opciones a un select

Varias veces he visto en los foros personas preguntando sobre el proceso de como agregar elementos a un select de forma dinámica, aprovechando que hoy tengo que hacer algo parecido lo voy a explicar paso por paso

En la función del controlador de donde esta el formulario pasamos la lista de valores que llevara el select, le añadimos un elemento "Nuevo" el cual vamos a explicar más adelante

$list = array('N'=>'Nuevo')+$this->Remove->find('list');
$this->set('list',$list);

En nuestra vista añadimos el select

<?php echo $form->input('remove_id', array( 'label'=> 'Motivo Retiro:',
                                            'type'    => 'select',
                                            'empty'   =>'--',
                                            'id'      =>'InscriptionRemoveId',
                                            'options' => $list
                                                     )

)?>


Luego con la ayuda de javascript + jquery hacemos lo siguiente:
$(document).ready(function (){
    //capturo el evento cuando el usuairo elige una opción del combo
    $("#InscriptionRemoveId").change(function (){
        // si eligio la opción de nuevo
        if ($(this).val() == 'N') {
            // creo una caja de texto con javascript para capturar el nombre del tipo
            var promp = window.prompt("Digite el nombre del nuevo tipo")

                if (promp) {
                    //envio los datos por post mediante ajax
                    $.post(url+'removes/add',{'data[Remove][name]':promp},function (data){
                        // me debe retornar una cadena html con las opciones del select
                        $("#InscriptionRemoveId").html(data);
                    });                
                }
        }
    });
});


Ahora en nuestro controlador agregamos la función add

public function add () {
    if ($this->data) {
        $this->Remove->save($this->data);
    }
    $this->loadModel('Remove');
    $list = array('N'=>'Nuevo')+$this->Remove->find('list');
    $this->set('list',$list);
}

Luego creamos la vista para la función add, la cual contiene las etiquetas options de la lista

<option>--<option>
<?php foreach ($list as $key =>$value):?>
<option value="<?php echo $key;?>"><?php echo $value;?></option>
<?php endforeach;?>

Con esto ya tendrán un select dinámico que permite añadir nuevos valores



No hay comentarios:

Publicar un comentario