Select dependientes en php usando Codeigniter con jquery

Select dependientes en php usando Codeigniter con jquery

Vamos a ver como crear select que dependan de otros, cuando seleccionemos una opción del primero, cambie el segundo select según lo elegido y nos cargue de la base de datos las opciones que mostrará.

Partiendo de la base que de que sabeis lo básico en codeigniter y usar el mvc y que ya habeis configurado correctamente la conexión a vuestra base de datos en el archivo database.php (dentro de application->config).

En este ejemplo cargaremos un primer select con tipos de bebida(ron,ginebra…) y el dependiente cargará marcas.

En nuestra base de datos tendremos una tabla llamada BEBIDA con un ID_BEBIDA y un NOMBRE_BEBIDA, y otra tabla llamada MARCA con un ID_MARCA, un NOMBRE_MARCA y ID_BEBIDA (foreing key del ID_BEBIDA de la tabla BEBIDA)

Para empezar le diremos a nuestro controlador(llamado misBebidas.php) que le pida al modelo(modeloBebida) las bebidas que tiene mediante la funcion getBebidas, es necesario cargar el modelo, en este ejmplo lo cargo ahí, pero si lo vais a usar mucho mejor cargarlo en el archivo autoload.

Los datos que recibamos los enviaremos cuando carguemos la vista, en este caso llame a la vista formularioBebida:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class misBebidas extends CI_Controller {

public function index(){

$this->load->model(‘modeloBebida’);

$data[‘bebidas’] = $this->modeloBebida->getBebidas();

$this->load->view(‘formularioBebida’,$data);

}

}

El siguiente paso es crear nuestro modelo en la carpeta correspondiente, con el conectaremos a la base de datos enviando y recibiendo información.

Como he dicho anteriormente lo llamaré modeloBebida.php, crearé la funcion getBebidas que tomará todas las bebidas que existen en nuestra base de datos, despues hago una comprobación de que haya almenos una, antes de retornar el resultado.

<?php
defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);

class modeloBebida extends CI_Model {

public function getBebidas(){
$bebidas = $this->db->get(‘bebida’);
if($bebidas->num_rows()>0){
return $bebidas->result();
}
}
}
?>
Es el momento de pasar a la vista. veamos la por partes, para empezar es necesario indicar que se usará jquery, remarcado en rojo podeis ver la parte donde enlazamos con la ultima version de jquery.
El script marcado en azul lo veremos despues, vamos a centrarnos primero en recibir los datos de nuestros tipos de bebidas y mostrarlos en un select, creamos el select y hacemos un foreach de los datos recibidos, y lo vamos mostrando, el id de la bebida lo asociamos al value y el nombre de la bebida lo expulsamos para que sea lo que vea el usuario.
Ya tenemos el primer select. Es importante que ademas de un name, lleve un id, que es al que vamos a llamar desde nuestro script. Para el select que depende de este solo nos tenemos que crear un select en este caso con id=”marca”.
Ahora vamos a ver el script, el código esta marcado en azul.
Le indicamos que cuando nuestro select con id bebida cambié seleccione el valor escogido, lo envie por el metodo post a la función de nuestro controlador que llamará a nuestro modelo y le devolverá las marcas asociadas al tipo de bebida y al retornarlo, esos datos los meta en nuestro select con id marca.
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function() {
$(“#bebida”).change(function() {
$(“#bebida option:selected”).each(function() {
bebida = $(‘#bebida’).val();
$.post(“<?php echo base_url(); ?>index.php/misBebidas/selectMarca”, {
bebida : bebida
}, function(data) {
$(“#marca”).html(data);
});
});
});
});
</script>
</head>
<body>
<select name=”bebida” id=“bebida”>
<?php
foreach($bebidas as $bb){
?>
<option value=<?=$bb -> ID_BEBIDA ?>><?=$bb -> NOMBRE_BEBIDA ?></option>
<?php
}
?>
</select>
 
<select name=“marca” id=“marca”>
     <option value=“”>Selecciona marca</option>
   </select>
</body>
</html>
Por lo tanto nos falta crear la función en nuestro controlador (misBebidas) y la función en nuestro modelo(modeloBebida).
Nos vamos al archivo misBebidas.php, y añadimos la función selectMarca que llamará al modelo:
Empezamos recibiendo por el metodo post los datos que nos pasa el script. cargamos el modelo, como dije más arriba, si lo tenemos incluido en autoload esto no lo necesitaremos. Asociamos a nuestra variable $marca las marcas que nos de nuestro modelo que tenga nuestra base de datos con ese tipo de bebida y hacemos un foreach para recorrerlas todas e ir generando los option correspondientes
public function selectMarca(){
$tipo=$this->input->post('bebida');
if($tipo){
$this->load->model(‘modeloBebida’);
$marcas=$this->modeloBebida->getMarcas($tipo);
foreach($marcas as $marca){

echo "<option value='".$marca['ID_MARCA']."'>".$marca['NOMBRE_MARCA']."</opction>";

}

}
}

Una vez creada nos vamos a nuestro modelo, en este caso modeloBebida.php y creamos la funcion getMarcas que recibirá una varible diciendonos el tipo de bebida seleccionada, consultamos a la base de datos y devolvemos el resultado que como vimos arriba recibirá el controlador y generara las opciones con ellos
public function getMarcas($tipo){
$this->load->database();
$consulta=”SELECT * FROM MARCA WHERE ID_BEBIDA=$tipo”;
$resultado=$this->db->query($consulta)->result_array();
return $resultado;
}
Hasta aqui este pequeño manual de como crear select dependientes, espero que os sirva de ayuda.
Si teneis alguna duda comentad
Advertisment ad adsense adlogger