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
https://www.ayudafacil.com/select-dependientes-en-php-usando-codeigniter-con-jquery/
Combos dependientes con

codeIgniter y ajax
Buenas a todos como siempre, ahora con un poco más de tiempo quería
mostrar como crear campos select dependientes y rellenarlos
mediante ajax con el framework codeIgniter, aunque bien es cierto
que se puede aplicar este ejemplo perfectamente a php cambiando 2
líneas.
Espero que el que las personas que estén viendo esto por lo menos
sepan como crear el proyecto con codeIgniter porque no pararemos a
explicarlo puesto que está explicado en 3 o 4 publicaciones de la web,
así que lo primero será crear el proyecto al cuál podemos llamar
selects_con_ajax por ejemplo y seguido creamos la vista, vamos a ello.
El archivo .htaccess para quitar el
index.php
Para que trabaje nuestra aplicación en codeIgniter si tener que poner
el index.php debemos crear un archivo .htaccess y colocarlo en la raíz
del proyecto y dentro colocamos lo siguiente:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /selects_con_ajax/index.php/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
ErrorDocument 404 /selects_con_ajax/index.php
</IfModule>
Ahora ya podemos acceder al proyecto desde

http://localhost/selects_con_ajax, sin el htaccess sería
http://localhost/selects_con_ajax/index.php
Ahora ya veremos el mensaje de bienvenida de codeIgniter.
Creamos la vista
Primero deberemos crear una vista a la que podemos llamar
micombo_view.php y dentro colocamos el código html que necesitamos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi combo con ajax</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/*funcion ajax que llena el combo dependiendo de la categoria seleccionada*/
$(document).ready(function(){
$("#categoria").change(function () {
$("#categoria option:selected").each(function () {
micategoria=$('#categoria').val();
$.post("http://localhost/selects_con_ajax/micombo/llenacombo", { micategoria:
micategoria}, function(data){
$("#subcategoria").html(data);
});
});
})
});
/*fin de la funcion ajax que llena el combo dependiendo de la categoria seleccionada*/
</script>
</head>
<body>
<label>Selecciona una categoría</label>
<select name="categoria" id="categoria">
<option value="">Selecciona una categoría</option>
<option value="compraventa">Compra y venta</option>
<option value="inmobiliaria">Mundo Inmobiliario</option>
<option value="motor">Mundo motor</option>
<option value="empleo">Empleo</option>
<option value="consolas-videojuegos">Consolas y videojuegos</option>
<option value="servicios">Servicios</option>
<option value="mascotas">Mascotas</option>
<option value="contactos">Contactos</option>
<option value="antiguedades">Antigüedades</option>
</select>
<label>Selecciona una subcategoría</label>
<select name="subcategoria" id="subcategoria">
<option value="">Selecciona una subcategoría</option>
</select>
</body>
</html>>
Bueno, aquí lo primero que hacemos es crear un campo select con las
categorías ya cargadas y a partir de ahí creamos otro que está
esperando a que escojamos una para poder llenarse con los datos que le
pidamos.
En el head si nos fijamos veremos que hemos creado una función ajax
javascript que hace lo siguiente:
$("#categoria").change(function ()
cuando se cambie el valor del select con id categoría el script manda la

selección a la función llenacombo que se encuentra en el controlador
micombo.php mediante la función $.post que nos proporcina el ajax de
jquery y le pasamos el valor con la variable micategoria que contendrá
el valor del campo seleccionado.
c
$.post("http://localhost/selects_con_ajax/micombo/llenacombo", {
micategoria: micategoria}
Y finalmente le decimos que el valor que nos devuelva la función

llenacombo nos lo coloque en el combo con id subcategoría.
$("#subcategoria").html(data);
No cabe decir que necesitamos cargar la librería de jquery para que

funcione nuestra aplicación con la siguiente línea.
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Con todo esto ya tenemos todo nuestro html y nuestro javascript, solo
nos falta crear el controlador y la función llenacombo, que será la que
nos rellene el select con id subcategoría, vamos a ello.
Creamos el controlador llenacombo

Este será nuestro controlador, a continuación pasamos a explicarlo más
detalladamente.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Micombo extends CI_Controller

{
function index()
{
$this->load->view('micombo_view');
}
function llenacombo()
{
$options="";
if ($_POST["micategoria"]== 'compraventa')
{
$options= '
<option value="bebes-ninos">Artículos de bebes y niños</option>
<option value="sonido">Sonido</option>
<option value="consolas-videojuegos">Consolas y videojuegos</option>
<option value="moviles">Móviles</option>
<option value="libros">Libros</option>
<option value="muebles">Muebles</option>
<option value="electrodomesticos">Electrodomésticos</option>
<option value="articulos-informatica">Artículos de informática</option>
<option value="tv-video">Televisión y video</option>
<option value="reproductores-dvd">Reproductores dvd</option>
<option value="video-camaras">Video cámaras</option>
';
}
if ($_POST["micategoria"]=='inmobiliaria') {
$options= '
<option value="venta-pisos">Vendo piso</option>
<option value="venta-casas">Vendo casa</option>
<option value="venta-terrenos">Vendo terreno</option>
<option value="venta-locales">Vendo local</option>
<option value="venta-lofts">Vendo loft</option>
<option value="alquiler-pisos">Alquilo piso</option>
<option value="alquiler-habitaciones">Alquilo habitación</option>
<option value="alquiler-vacaciones">Alquilo para vacaciones</option>
<option value="alquiler-casas">Alquilo casa</option>
<option value="alquiler-locales">Alquilo local</option>
<option value="alquiler-loft">Alquilo loft</option>
';
}
if ($_POST["micategoria"]=='motor') {
$options= '
<option value="coches">Coches</option>
<option value="coches-sin-carnet">Coches sin carné</option>
<option value="motocicletas">Motocicletas</option>
<option value="caravanas">Caravanas</option>
<option value="furgonetas">Furgonetas</option>
<option value="camiones">Camiones</option>
<option value="accesorios">Accesorios</option>
<option value="ciclomotores">Ciclomotores</option>
<option value="todo-terrenos">Todo terrenos</option>
<option value="quads">Quads</option>
<option value="karts">Karts</option>
';
}
if ($_POST["micategoria"]=='servicios') {
$options= '
<option value="mudanzas">Mudanzas</option>
<option value="reparaciones">Reparaciones</option>
<option value="limpieza">Limpieza</option>
<option value="informatica">Informática</option>
<option value="canguros">Canguros</option>
<option value="cuidados-animales">Cuidados animales</option>
<option value="horoscopo-tarot">Horóscopo/Tarot</option>
';
}
if ($_POST["micategoria"]=='empleo') {
$options= '
<option value="abogados">Abogados</option>
<option value="administrativos">Administrativos</option>
<option value="comerciales">Comerciales</option>
<option value="freelance">Freelance</option>
<option value="informatica">Informática</option>
<option value="voluntarios">Voluntarios</option>
<option value="atencion-cliente">Atención al cliente</option>
<option value="hosteleria">Hosteleria</option>
<option value="construccion">Construcción</option>
<option value="transportistas">Transportistas</option>
<option value="vigilantes">Vigilantes</option>
<option value="mensajeros">Mensajeros</option>
';
}
if ($_POST["micategoria"]=='mascotas') {
$options= '
<option value="perros">Perros</option>
<option value="gatos">Gatos</option>
<option value="peces">Peces</option>
<option value="roedores">Roedores</option>
<option value="pajaros">Pájaros</option>
<option value="tortugas">Tortugas</option>
<option value="camaleones">Camaleones</option>
<option value="caballos">Caballos</option>
<option value="otros-animales">Otros animales</option>
';
}
if ($_POST["micategoria"]=='contactos') {
$options= '
<option value="chica-busca-chico">Chica busca chico</option>
<option value="chica-busca-chica">Chica busca chica</option>
<option value="chico-busca-chica">Chico busca chica</option>
<option value="chico-busca-chico">Chico busca chico</option>
<option value="relaciones-ocasionales">Relaciones esporádicas</option>
<option value="eroticos-profesionales">Profesionales</option>
';
}
if ($_POST["micategoria"]=='antiguedades') {
$options= '
<option value="monedas">Monedas</option>
<option value="cuadros">Cuadros</option>
<option value="sellos">Sellos</option>
<option value="cromos">Cromos</option>
<option value="mobiliario">Mobiliario</option>
<option value="relojes">Relojes</option>
<option value="otras-antiguedades">Otras antigüedades</option>
';
}
if ($_POST["micategoria"]=='consolas-videojuegos') {
$options= '
<option value="gamecube">Game cube</option>
<option value="gameboy-advance">Gameboy advance</option>
<option value="gameboy">Gameboy</option>
<option value="nintendo-wii">Nintendo wii</option>
<option value="nintendo-ds">Nintendo ds</option>
<option value="nintendo-64">Nintendo 64</option>
<option value="dreamcast">Dreamcast</option>
<option value="psp">Psp</option>
<option value="playstation1">Playstation 1</option>
<option value="xbox">Xbox</option>
';
}
echo $options;
}
}
Creamos lo básico, la función index en la que cargamos la vista con la

función this->load->view de codeigniter y seguido creamos la función
llenacombo, esta función lo que hace es que según el valor que contenga
la variable micategoria seleccionar una u otra opción y así imprimirla en
nuestro select con id subcategoria, y ya esta, eso es todo lo que hay que
hacer para crear un select dependiente con ajax y codeIgniter, y
como bien dije al principio de la entrada esta función se adapta muy
sencillamente a cualquier proyecto con php, copiar y pegar, así que
esperemos que haya servido de algo y que se entienda, saludos a todos
y hasta la próxima.
Invito a todo el mundo a visitar mi web de anuncios clasificados que

recién la subí a la web y todavía le falta mucho, pero funciona
perfectamente, y como no podía ser de otra forma con el framework
codeIgniter.
https://www.uno-de-piera.com/combos-dependientes-con-codeigniter-y-ajax/
Inputs dependientes con codeigniter

Hola, como estan? Estoy desarrollando una aplicación para final de semestre.
Lo que quiero hacer es lo siguiente, la ingresar un código en un input, se verifica que exista en la base de datos, si ese
código existe me coloca la descripción de ese código en otro inputs.
CODIGO HTML
<div class="row clearfix">
<div class="col-sm-2">
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" id="aduana"
name="aduana" pattern="[A-Za-z,.&]{4-16}" required>
<label class="form-label">Aduana:</label>
</div>
<div class="help-info">Teledespacho</div>
</div>
</div>
<input type="text" class="form-control" id="nombreAduana"
name="nombreAduana" pattern="[A-Za-z,.&]{4-16}" required>
<label class="form-label"></label>
</div>
</div>
</div>
</div>
JAVASCRIPT
$("#aduana").change(function() {
$("#aduana").each(function() {
aduana = $('#aduana').val();
$.post("http://localhost/betania/tramite/verificAduana", {
aduana : aduana
}, function(data) {
$("#nombreAduana").html(data);
});
});
})
FUNCION DEL CONTROLADOR
public function verificAduana()
//$options = "";
if($this->input->post('aduana'))
//echo '<script language="javascript">alert("entro al
controlador");</script>';
$aduana = $this->input->post('aduana');
//verificamos si la aduana existe.

$check=$this->db->query('SELECT nombre_pais FROM paises
where codPais=='.$aduana.'')->result();
}
Lo que no he podido realizar es que desde el javascript pueda ingresar a la función del controlador y no sé cómo
retornar el valor que encuentre en la base de datos al input nombreAduana
He aplicado un código similar que encontré en la web donde hacen lo mismo solo que con dos select.
Espero puedan ayudarme, de antemano gracias

Hola,
lo que puedes hacer es verificar el resultado del data, como por ejemplo en el controlador:
if($check == true){
echo 1;
}else{
echo 0;
}
Entonces el resultado de data será 1 o 0.
Y lo verificas con jQuery:
$.post("http://localhost/betania/tramite/verificAduana", {
aduana : aduana
}, function(data) {
if(data == 1){
}
else{
'e resultado será 0';
});
});
})

Santi, muchas gracias por tu ayuda, me sirvió de mucho. Logré realizarlo.
Al final quedo así.
Función del controlador tramite [Codeigniter]
public function verifica_aduana()
if($this->input->post('aduana'))
$aduana = $this->input->post('aduana');
//verificamos si la aduana existe.

$check = $this->aduanas_model->infoAduana($aduana);
foreach($check->result() as $fila)
if(isset($fila)){ ?>
<h5 style="color:blue" ><?=$fila-
>nombreAduana?></h5>
<?php
}
else{
?>
<h5 style="color:blue" ></h5>
<?php
}
codigo Js (archivo externo que lo he llamado prueba.js
$(function(){
$.post("../tramite/verifica_aduana", {aduana : aduana},
function(data) {
if(data === null|| data===''){
alert('CODIGO DE ADUANA NO EXISTE\n intente de nuevo');
document.getElementById("aduana").value=null;
document.getElementById("aduana").focus();
else{
});
});
});
});
Codigo HTML
<input type="text" class="form-control" id="aduana"
name="aduana" pattern="[A-Za-z,.&]{4-16}" required>
<label class="form-label">Aduana:</label>
</div>
<div class="help-info">Teledespacho</div>
</div>
</div>
<div class="col-sm-3" id="nombreAduana">
</div>
En síntesis lo que hice fue, cuando cambia el valor de input “aduana”, compruebo si ese código existe en la base de
datos. Si el valor existe me retorna el nombre de aduana y se la asigno a una etiqueta <h5> que posteriormente se la
asigno al div “nombreaduana”, y lo cargo desde el JavaScript con $("#nombreAduana").html(data);
https://www.lawebdelprogramador.com/foros/Codeigniter/1620820-Inputs-dependientes-
con-codeigniter.html
Cómo crear un select dinámico
Advertencia : Parámetro 2 a wp_hide_post_Public :: query_posts_join
() espera que sea una referencia, valor dado
en /home/dicas/public_html/wp-includes/class-wp-hook.php en la
línea 286
UPDATE 10/03/2017
Ver el vídeo donde muestra cómo hacer un select dinámico con

Estados / Ciudades.
Es muy común hoy en día necesitar de sitios donde hay selectos

dinámicos para aumentar la funcionalidad y la interactividad del
usuario.
Pero qué son incluso selects o combos dinámicos?
El ejemplo clásico para explicar esto es el de Estados y Ciudades. En

una página hay 2 selecciones, el primero contiene los estados y el
segundo contiene las ciudades, pero que está inactivo.
Cuando el usuario escoge un estado, automáticamente el combo de

ciudades se rellenará con las ciudades de ese estado.
Veamos el ejemplo de cómo hacer algo hoy en CodeIgniter . Vamos a

aprender cómo crear un select dinámico. Aquí no voy a enseñar a
hacer la parte de Estados / Ciudades, pero va a ser un ejemplo que
tiene el funcionamiento igual. Si usted entiende cómo funciona este
ejemplo, usted conseguirá hacer su select de Estados / Ciudades.
La idea aquí es la siguiente: vamos a imaginar que estamos

desarrollando una tienda virtual y que habrá 2 selectos de navegación.
El primer select contendrá los Departamentos, y el segundo select

contendrá los productos del departamento elegido en el select
anterior.
El primer paso es crear una base de datos con las respectivas tablas
La primera tabla será la de departamentos. Será una tabla muy

simple, con sólo 2 campos. DEPARTAMENTOS_ID y
DEPARTAMENTOS_NOME. Debajo de SQL para que usted cree:
CREATE TABLE IF NOT EXISTS `departamentos` (
`departamentos_id` int(11) NOT NULL AUTO_INCREMENT,

`departamentos_nome` varchar(255) NOT NULL,
PRIMARY KEY (`departamentos_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Ahora, la tabla PRODUCTOS. También será muy simple. Tendrá los

campos: PRODUCTOS_ID, PRODUCTOS_ID_DEPARTAMENTO,
PRODUCTOS_NOME. Ver el código:
CREATE TABLE IF NOT EXISTS `produtos` (
`produtos_id` int(11) NOT NULL AUTO_INCREMENT,
`produtos_id_departamento` int(11) NOT NULL,
`produtos_nome` varchar(255) NOT NULL,
PRIMARY KEY (`produtos_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
En esta tabla, tenga en cuenta el campo

PRODUCTOS_ID_DEPARTAMENTO. Aquí vamos a insertar el ID del
departamento PAI de este producto. Recuerde que un
DEPARTAMENTO puede tener varios productos.
No voy a crear aquí la parte de inserción de datos en las

tablas. Vamos a entrar a través de phpMyAdmin todo en la mano.
Añada en la tabla DEPARTAMENTOS los siguientes registros de
ejemplo:
ORDENADOR
DE TELEFONÍA
ELECTRODOMÉSTICOS
JUEGOS
No es necesario colocar nada en el campo DEPARTAMENTOS_ID,

pues es un campo del tipo auto incremento.
Después de insertar los registros, debe tener algo parecido a esto:
Ahora, en la tabla PRODUCTOS vamos a insertar los productos de

cada departamento. Pero antes de insertar un producto, debe
comprobar qué departamento pertenece y copiar el identificador de
departamento para insertar en la tabla. Supongamos que voy a
insertar productos que son del departamento INFORMÁTICA y vamos
a considerar que el DEPARTAMENTOS_ID de INFORMÁTICA es 1.
Entonces, en la tabla PRODUCTOS los registros quedarán así:
PRODUTOS_ID_DEPARTAMENTO: 1
PRODUTOS_NOME: MOUSE
PRODUTOS_NOME: TECLADO
PRODUTOS_NOME: MONITOR
PRODUTOS_NOME: HD
PRODUTOS_NOME: MEMORIA
PRODUTOS_NOME: FUENTE
Este es un paso muy importante, ya que es el campo

PRODUCTOS_ID_DEPARTAMENTO que va a decir qué
departamento es el dueño de ese producto. Haga lo mismo ahora para
otros departamentos. Ponga unos 3 productos por departamento.
Vamos a insertar ahora productos para el departamento TELEFONIA,

que tiene el ID igual a 2.
PRODUTOS_NOME: BATERÍA
PRODUTOS_NOME: CABLE DE DATOS
PRODUTOS_NOME: DISPLAY
Ahora los productos para el departamento APARATOS, que tiene el

mismo ID de 3
PRODUTOS_NOME: Placa
PRODUTOS_NOME: FRIGORÍFICO
PRODUTOS_NOME: ROPA WASHER
Y por último, productos para el departamento GAMES, que tiene el ID

igual a 4
PRODUTOS_NOME: PLAYSTATION
PRODUTOS_NOME: WII
PRODUTOS_NOME: XBOX
La tabla de productos debe parecerse a la siguiente imagen:
Entonces, nuestras mesas ya están pobladas y ahora puede hacer la

parte de codificación de CodeIgniter .
Coloque una nueva copia de CodeIgniter en la carpeta de su servidor

y configúrela para conectarse a la base de datos recién creada. Si
usted no sabe cómo para configurar CodeIgniter para conectarse a
una base de datos, haga clic aquí .
Después de conectarse a la base de datos, asegúrese de cargar la
biblioteca de base de datos en autoload.php, que está en application /
config , CodeIgniter. Sólo tiene que abrir este archivo e indicar que
desea cargar la biblioteca de base de datos en la línea 55.
Ahora vamos a aprovechar la estructura de estilos y los controllers y
vistas que el propio CodeIgniter trae para gente.
El primer paso es crear los dos selects que quedarán en la página de

inicio.
Abra la vista welcome_message.php que se encuentra en application /

views. Div localizar el cuerpo y eliminar el <p> que están allí. Entonces
coloque el siguiente código:
<p>
Escolha o Departamento:<br />
<select name="departamentos" id="departamentos">
<? echo $options_departamentos; ?>
</select>
</p>
<p>
Escolha o Produto:<br />
<select name="produtos" id="produtos">
</select>
</p>
Aquí vamos a llenar los selects dinámicamente. Tenga en cuenta que

en lugar de escribir las opciones para seleccionar, puse una variable
de PHP. Esta variable vendrá del controlador welcome.php que es
donde vamos a montar las opciones con la tabla DEPARTMENT
próximos departamentos.
La selección de productos también se rellenará dinámicamente, sin
embargo, a través de ajax. Y los valores se rellenar basado en el
departamento que el usuario elija en el select arriba.
Ahora, vamos a crear un modelo que tendrá acceso a la base de datos

y luego crear una función que traerá todos los departamentos de la
tabla DEPARTAMENTOS.
Crear un archivo llamado: m_departamentos_produtos.php y guardar

dentro de la carpeta application / models
Dentro de este archivo coloque el siguiente código:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class M_departamentos_produtos extends CI_Model{

function __construct()
parent::__construct();
public function retorna_departamentos()
$this->db->order_by("departamentos_nome", "asc");
$consulta = $this->db->get("departamentos");
return $consulta;
Observe aquí las reglas de nombres para la creación de un

modelo. La primera letra de la clase debe ser la primera letra del
nombre del archivo, pero en mayúscula.
A continuación, creamos la función devuelve_departamentos () que al

ser llamada hará una simple consulta en la tabla DEPARTAMENTOS
y retornará estos datos al controlador welcome, que será de donde
vamos a llamar a este modelo.
Ahora abre el archivo welcome.php que está en application /

controllers , busque la función index () y luego vuelva a colocar el
siguiente código:
public function index()
$this->load->model("m_departamentos_produtos");
$departamentos = $this->m_departamentos_produtos->retorna_departamentos();
$option = "<option value=''></option>";
foreach($departamentos -> result() as $linha) {

$option .= "<option value='$linha->departamentos_id'>$linha-
>departamentos_nome</option>";
$variaveis['options_departamentos'] = $option;
$this->load->view('welcome_message', $variaveis);
Lo que hacemos aquí es el siguiente:
Cargamos nuestro modelo que hará las consultas a la base de datos.
Luego llamamos la función dentro de este modelo que traerá los

registros de la tabla DEPARTAMENTOS y asignamos estos valores a
una variable llamada $ departamentos.
Hemos recorrido esta variable usando un foreach y para cada línea,

creamos una opción del select. Después de recorrer la tabla entera,
enviamos el valor contenido en $ option a la vista a través de la
variable options_departamentos.
Si todo ha salido bien, usted ya debe ver el select Departamentos

llenado y funcionando en su página de inicio. Ver la figura siguiente:
Ahora, vamos a trabajar encima de seleccionar productos. La lógica es

la siguiente: vamos a añadir un evento onchange dentro de selectos
departamentos, y cada vez que se hace clic en un departamento
diferente, una función de JavaScript que traerá productos ese
departamento, se llamará y llenará los productos seleccionados.
Cambie la etiqueta de apertura del select de departamentos al
siguiente código:
<select name="departamentos" id="departamentos"
onchange='busca_produtos($(this).val())'>
Lo que hicimos aquí fue añadir el evento onchange que llamará a la

función de búsqueda_productos que recibirá como parámetro el valor
que está en VALUE dentro de cada opción cuando se
selecciona. Para pasar el ID de departamento parámetro se utiliza una
función de jQuery: $ (this) .val (), lo que debería agregar en el archivo
CABEZA welcome_message.php línea Ümal que trae el jQuery para
su proyecto. Puede ser un archivo en su servidor o alojarse en alguna
parte de la red. Vamos a usar aquí un código que Google nos
proporciona:
Añade entre las etiquetas: <head> y </ head> el siguiente código:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Y justo debajo de esta línea, pero antes de cerrar la etiqueta </ head>,
coloque nuestra función que va a buscar los datos en la base de
datos.
function busca_produtos(id_departamento){
alert(id_departamento);
Observe que por el momento he puesto sólo una alerta en el

identific_departamento que está viniendo como parámetro del
select. Esto es sólo para probar. Al hacer clic en algún departamento
debes ver un alerta en tu pantalla con tu ID. Haga la prueba.
Si usted no ve un alerta con el ID del departamento, entonces tiene
algo mal y usted no debe proceder a leer aquí en el post. Vuelve e
intenta encontrar el error. De lo contrario, no funcionará.
Probado y funcionando, vamos a cambiar la función de

búsqueda_productos para el código que realmente va a tener alguna
utilidad.
Lo que vamos a hacer es una consulta vía ajax para una función
dentro del controlador de bienvenida donde pasar el id_departamento
como parámetro para hacer una búsqueda en la tabla de
productos. Entonces, sólo los productos de ese departamento deben
ser devueltos. A continuación se muestra el código de función:
var base_url = '<? echo base_url() ?>';
function busca_produtos(id_departamento){
$.post(base_url+"index.php/welcome/busca_produtos_by_departamento", {
id_departamento : id_departamento
}, function(data){
$('#produtos').html(data);
});
Arqué almacené la dirección base del sitio dentro de la variable

javascript base_url, para que yo la utilizara en la función. Para utilizar
la función base_url () de CodeIgniter, debe habilitar el helper 'url'
dentro del autoload.php, que está en application / autoload.php
Después, he utilizado la función $ .post () de jQuery, que básicamente

hace el post de algún parámetro a una dirección proporcionada, y
devuelve algún valor dentro de la función DATA, que en el caso son
las opciones basadas en el departamento que queremos.
A continuación, cambie el contenido del select productos a través de la

línea $ ('# productos) .html (fecha). Donde dentro de la fecha están las
opciones que generamos en el controlador.
Ahora, vamos a crear una función dentro de nuestro modelo que

traerá los productos basados en el identificador del departamento.
Abra el modelo m_departos_productos y añada la siguiente función:

public function retorna_produtos_by_departamento() {
$id_departamento = $this->input->post("id_departamento");
$this->db->where("produtos_id_departamento", $id_departamento);
$this->db->order_by("produtos_nome", "asc");
$consulta = $this->db->get("produtos");
return $consulta;
Aquí el proceso también es muy simple. Recibo el id del departamento

a través de post y uso esto como parámetro para consultar la tabla de
productos, para que me devuelva sólo los productos que tienen el id
del departamento pasado. A continuación, salgo de la función con un
retorno de esta consulta.
Ahora, vamos al controlador.
Abra el controlador welcome.php y añada la siguiente función:

public function busca_produtos_by_departamento(){
$this->load->model("m_departamentos_produtos");
$produtos = $this->m_departamentos_produtos->retorna_produtos_by_departamento();
$option = "<option value=''></option>";
foreach($produtos -> result() as $linha) {
$option .= "<option value='$linha->produtos_id'>$linha->produtos_nome</option>";
echo $option;
Esta es la función que el $ .post () del jquery llama desde la vista

welcome_message.php. Esta función hace lo siguiente:
Carga el modelo, luego llama a la función dentro del modelo que

retornará los productos pertenecientes al departamento, a través del
ID del departamento que se pasa allá dentro del modelo.
Cuando el modelo devuelve los datos, utilizo un foreach para montar

las opciones, exactamente como en la función Departamentos, pero
aquí tiene un detalle que hace toda la diferencia.
Observe que en la función que monta el select de departamentos,

paso los options vía variable PHP, y recupero estos valores allí en la
vista.
En el caso de la función que va a montar las opciones del select de

productos, necesito dar un echo en la variable creada por el foreach,
pues este valor será recuperado por la función $ .post () del jQuery,
que nada más es que un texto común, y, este texto asigno al select
dentro del html.
Bueno, si has hecho todo bien y que no me perdí nada es estar

todos trabajando. Al seleccionar un departamento cualquiera, el
combo de productos a continuación se rellena automáticamente sin
recargar la página.
A continuación sigue el enlace para descargar el proyecto. No olvide

crear la base de datos y las tablas.
-> Descargar el diseño dinámico Seleccionar

Este es el final del post de hoy. Por favor, no olvide dejar su
comentario abajo diciendo sus dudas o sugerencias de nuevos
puestos.
Abrazos.
https://www.dicascodeigniter.com.br/como-criar-um-select-dinamico/
select_dinamico_v2
JCombo con CodeIgniter

Ya habíamos hablado del JCombo, plugin de Jquery que permite anidar facilmente elementos select, es
decir, disponer de combos dependientes. A continuación un ejemplo de uso con CodeIgniter.
Modelo: jcombo_m.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Jcombo_m extends
CI_model{ function __construct(){ parent::__construct(); $this->load-
>database(); } public function get_paises(){ $query = $this->db ->query("SELECT
id_country AS id, country_name AS descripcion FROM countries ORDER BY descripcion
ASC"); if($query->num_rows()>0){ $arrDatos = array(); foreach($query-
>result() as $row){ $arrDatos[] = array( htmlspecialchars($row-
>id,ENT_QUOTES), htmlspecialchars($row-
>descripcion,ENT_QUOTES) ); } $query->free_result(); //
devolver los datos en json return json_encode($arrDatos); }else{ return
json_encode(array(1=> array("-- no se encontraron registros.."))); } } public function
get_ciudades($id){ if(empty($id) or !ctype_digit($id)) return false; $query = $this-
>db ->query("SELECT id_city AS id, city_name AS descripcion FROM cities WHERE
id_country=? ORDER BY descripcion ASC",array($id)); if($query-
>num_rows()>0){ $arrDatos = array(); foreach($query->result() as
$row){ $arrDatos[] = array( htmlspecialchars($row-
>descripcion,ENT_QUOTES) ); } $query->free_result(); // devolver
los datos en json return json_encode($arrDatos); }else{ return
json_encode(array(1=> array("-- no se encontraron registros.."))); } } public function
get_zonas($id){ if(empty($id) or !ctype_digit($id)) return false; $query = $this-
>db ->query("SELECT id_zone AS id, zone_name AS descripcion FROM zones WHERE
id_city=? ORDER BY descripcion ASC",array($id)); if($query-
>num_rows()>0){ $arrDatos = array(); foreach($query->result() as
$row){ $arrDatos[] = array( htmlspecialchars($row-
>descripcion,ENT_QUOTES) ); } $query->free_result(); // devolver
los datos en json return json_encode($arrDatos); }else{ return
json_encode(array(1=> array("-- no se encontraron registros.."))); } }}
Controlador: jcombo_c.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Jcombo_c extends
CI_Controller { function __construct() { parent::__construct(); $this->load-
>model('jcombo_m','modelo'); $this->load->helper('url'); $this->load-
>helper('form'); } public function index($submit=false){ $arrDatos['sTitulo'] = 'JCombo
en CodeIgniter'; $arrDatos['submit'] = $submit; // si se envio el
formulaario.. if($submit){ $arrDatos['id_pais'] = $this->input-
>post('selPaises'); $arrDatos['id_ciudad'] = $this->input-
>post('selCiudades'); $arrDatos['id_zona'] = $this->input->post('selZonas'); } $this-
>load->view('jcombo_v',$arrDatos); } public function get_paises(){ # para este caso
particular, # es necesario imprimir aqui en el controlador.. echo $this->modelo-
>get_paises(); } public function get_ciudades($id){ echo $this->modelo-
>get_ciudades($id); } public function get_zonas($id){ echo $this->modelo-
>get_zonas($id); } } /* End of file jcombo_c.php */ /* Location: ./application/controllers/jcombo_c.php */
Vista: jcombo_v.php
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title><?php echo $sTitulo;
?></title>  <script type="text/javascript" src="<?php
echo base_url(); ?>/js/jquery.js"></script> <script type="text/javascript" src="<?php echo base_url();
?>/js/jcombo/jquery.jCombo.min.js"></script>  <script
type="text/javascript"> $(function() { // paises es el primer select a llenar<pre
class='brush:xml'> $("#selPaises").jCombo( "<?php echo base_url();
?>index.php/jcombo_c/get_paises",{ selected_value: "<?php echo empty($id_pais) ? 0 : $id_pais;
?>", initial_text: "-- seleccione un país --" }); $("#selCiudades").jCombo("<?php echo
base_url(); ?>index.php/jcombo_c/get_ciudades/",{ parent: "#selPaises", // combo
padre selected_value: "<?php echo empty($id_ciudad) ? 0 : $id_ciudad; ?>", initial_text: "--
seleccione una ciudad --" }); $("#selZonas").jCombo("<?php echo base_url();
?>index.php/jcombo_c/get_zonas/",{ parent: "#selCiudades", selected_value: "<?php echo
empty($id_zona) ? 0 : $id_zona; ?>", initial_text: "-- seleccione una zona --
" }); }); </script> <style> #form_ppal{ margin: 0 auto; border: 1px dashed
blue; padding: 3px; width: 500px; } #form_ppal p{ width: 100%; font-weight:
bold; } #form_ppal p label{ width: 70px; font-weight: bold; float: left; text-
align:right; padding-right:3px; margin-top:3px; } </style> </head> <body> <?php echo
form_open('jcombo_c/index/1',array('id'=>'form_ppal'));// <form .. echo '<p>',form_label('Paises:
') ,form_dropdown('selPaises',array(),'','id="selPaises"'),'</p>'; echo '<p>',form_label('Ciudades:
') ,form_dropdown('selCiudades',array(),'','id="selCiudades"'),'</p>'; echo '<p>',form_label('Zonas:
') ,form_dropdown('selZonas',array(),'','id="selZonas"'),'</p>'; echo
'<p>',form_label('') ,form_submit(array('id'=>'btEnviar','value'=>'Enviar')),'</p>'; // si el formulario se
recargo, mostramos los datos enviados.. if ($submit){ echo '<hr/><p>id_pais: ',$id_pais,'</p>'; echo
'<p>id_pais: ',$id_ciudad,'</p>'; echo '<p>id_pais: ',$id_zona,'</p>'; } echo form_close();// </form> ?>
</body> </html>
La explicación del plugin está en el post citado, el script de la base de datos se encuentra en el paquete
de descarga oficial. La configuración de la base de datos es igual que siempre..
application/config/database.php
$db['default']['hostname'] = 'localhost';// mi servidor $db['default']['username'] = 'root';// mi usuario en

MySQl $db['default']['password'] = '1234';// el password de mi usuario, si no tiene no se coloca..
$db['default']['database'] = 'ci_jcombo';// el nombre de mi base de datos de ejemplo $db['default']['dbdriver']
= 'mysql';
Para el ejemplo use MySQl, pero esto no es limitante, puedes usar cualquier otro manejador de base de
datos.
Cualquier duda no dudes en consultar!

https://cassianinet.blogspot.com/2012/04/ya-habiamos-hablado-del-jcombo-plugin.html#ixzz5T95GIT6l
https://cassianinet.blogspot.com/2012/04/ya-habiamos-hablado-del-jcombo-
plugin.html#axzz5T8mQWwa0
https://github.com/cardeol/jquery-jcombo
Combos anidados con JQuery

A medida que desarrollamos un sistema, se nos presenta uno u otro requerimiento que debemos
resolver rápidamente para no atrasarnos, y mucho mas, si tienes una fecha de entrega muy cercana.
Uno de los casos habituales dentro de un desarrollo es la necesidad de anidar, agrupar, enlazar combos,
entiéndase por combos los elementos de tipo SELECT. Ajax es la manera más profesional de
trabajarlo, disponemos de JQuery para complementar lo que con solo PHP por ejemplo, no podemos
conseguir sin que se vuelva tedioso si tienes muchos campos en el mismo formulario.
jCombo es un plugin de JQuerydesarrollado por Carlos De Oliveira, para selects simples y anidados.
esta extensión, simplifica el proceso de obtener data en combos SELECT, aún si están anidados o no. La
única condición es obtener los campos de la base de datos consecutivamente creando pares de
[valor][texto] en formato JSON. No obstrusivo, sin efectos ni estilos. Este componente es un intento para
obtener combos anidados de la forma mas rápida posible.
Uso:
1.- incluimos la librería y el plugin (entre etiquetas head)


<script type="text/javascript" src="ruta/jquery.js"></script>
src="ruta/jquery.jCombo.min.js"></script>
2.- configuramos (entre etiquetas head):


$(function() {
// paises es el primer select a llenar<pre class='brush:xml'>

$("#selPpaises").jCombo("funciones.php?funcion=get_paises",{});
$("#selCiudades").jCombo("funciones.php?funcion=get_ciudades&id=",{
parent: "#selPaises" // combo padre
});
$("#selZonas").jCombo("funciones.php?funcion=get_zonas&id=",{
parent: "#selCiudades"
});
});
</script>
3.- indicamos que selects serán anidados:

<p>Paises: <select name="selPaises" id="selPaises"></select></p>
<p>Ciudades: <select name="selCiudades" id="selCiudades"></select></p>
<p>Zonas: <select name="selZonas" id="selZonas"></select></p>
¿Como funciona?
para llenar el combo basta con llamar al archivo que generara los datos e indicar a que objeto se le
asignaran:
$("select[name='paises']").jCombo("get_paises.php");
el plugin trabaja con el formato JSON, así que es en ese formato en el que debemos devolverlos,
podemos trabajar con JSON en PHP sin ningún problema. Puedes por ejemplo, llamar a un
archivo PHP diferente que te devuelva los datos para cargar cada select o llamar a uno solo que devuelva
los valores de acuerdo al valor pasado por parámetro.
$("#selPaises").jCombo("funciones.php?funcion=get_paises",{});
$("#selCiudades").jCombo("funciones.php?funcion=get_ciudades&id="{ ...
$("#selZonas").jCombo("funciones.php?funcion=get_zonas&id=",{ ...
voy a dejar un ejemplo para el contenido funciones.php y como gestiona los valores recibidos, para
generar los datos destinados a la carga de cada select.
<?php
// indicamos que la respuesta tendra el formato JSON
header('Content-type: application/json');
// conexion con la base de datos

include("config.php");
// devuelve en formato JSON los datos para llenar el combo "paises"

function get_paises(){
$query = "SELECT id_country, country_name FROM countries ORDER BY
country_name ASC";
$result = mysql_query($query);
$items = array();
if($result && mysql_num_rows($result)>0) {
while($row = mysql_fetch_array($result)) {
$items[] = array(
htmlspecialchars($row[0],ENT_QUOTES),
htmlspecialchars($row[1],ENT_QUOTES));
}
}
mysql_close();
// devolvemos datos en formato json

return json_encode($items);
}
// retornamos las ciudades pertenecientes a un deterinado pais (id)

function get_ciudades($id){
if (empty($id) or !ctype_digit($id)) return false;
// en este caso se consultan las columnas tal como se van a

devolver
$query = "SELECT id_city, city_name FROM cities WHERE id_country =
'$id' ORDER BY city_name ASC";
$items = array();
$items[] = array(
}
}
mysql_close();

}
// retornamos las zonas pertenecientes a una deterinada ciudad (id)

function get_zonas($id){
if (empty($id) or !ctype_digit($id)) return false;
$query = "SELECT id_zone, zone_name FROM zones WHERE id_city =

'$id' ORDER BY zone_name ASC";
$items = array();
$items[] = array(
}
}
mysql_close();

}
// devolvemos solo lo solicitado

switch ($_GET['funcion']){
case 'get_paises':
echo get_paises();
break;
case 'get_ciudades':
echo get_ciudades($_GET['id']);
break;
case 'get_zonas':
echo get_zonas($_GET['id']);
break;
default:{ echo 'parametros incorrectos';}

}
?>
Opciones: (configuración del plugin)
- parent: elemento SELECT del cual se deben obtener los datos (combo padre).
- initial_text: mensaje por defecto al seleccionar una opción. Si se coloca un valor vacío ('') entonces no
se mostrará ningún texto.
- selected_value: preselecciona el combo en el valor colocado.
- parent_value: establece la carga inicial del elemento padre (sólo cuando el elemento está en cascada).
Fuente: Cassianet >> https://cassianinet.blogspot.com/2011/11/combos-anidados-con-

jquery.html#ixzz5T961nWfV
https://cassianinet.blogspot.com/2011/11/combos-anidados-con-
jquery.html?showComment=1326337380622#axzz5T8mQWwa0
http://www.antoniorios.net/blog/?p=346
https://github.com/antonioriosm/ci_listas_js
https://github.com/antonioriosm/ci_listas

Ya habíamos hablado del JCombo, plugin de Jquery que permite anidar facilmente elementos select, es
decir, disponer de combos dependientes. A continuación un ejemplo de uso con CodeIgniter.
<?php if ( ! defined('BASEPATH')) exit('No direct script access

allowed');
class Jcombo_m extends CI_model{
function __construct(){
}
public function get_paises(){
$query = $this->db
->query("SELECT id_country AS id, country_name AS descripcion
FROM countries ORDER BY descripcion ASC");
if($query->num_rows()>0){
$arrDatos = array();
foreach($query->result() as $row){
$arrDatos[] = array(
htmlspecialchars($row->id,ENT_QUOTES),
htmlspecialchars($row->descripcion,ENT_QUOTES)
);
}
$query->free_result();
// devolver los datos en json

return json_encode($arrDatos);
}else{
return json_encode(array(1=> array("-- no se encontraron

registros..")));
}
}
public function get_ciudades($id){
if(empty($id) or !ctype_digit($id)) return false;
$query = $this->db
->query("SELECT id_city AS id, city_name AS descripcion
FROM cities WHERE id_country=?
ORDER BY descripcion ASC",array($id));
);
}

}else{

registros..")));
}
}
public function get_zonas($id){
$query = $this->db
->query("SELECT id_zone AS id, zone_name AS descripcion
FROM zones WHERE id_city=?
);
}

}else{

registros..")));
}
}
}

allowed');
class Jcombo_c extends CI_Controller {
function __construct() {
$this->load->model('jcombo_m','modelo');
$this->load->helper('url');
$this->load->helper('form');
}
public function index($submit=false){
$arrDatos['sTitulo'] = 'JCombo en CodeIgniter';

$arrDatos['submit'] = $submit;
// si se envio el formulaario..
if($submit){
$arrDatos['id_pais'] = $this->input->post('selPaises');
$arrDatos['id_ciudad'] = $this->input-
>post('selCiudades');
$arrDatos['id_zona'] = $this->input->post('selZonas');
}
$this->load->view('jcombo_v',$arrDatos);
}
# para este caso particular,

# es necesario imprimir aqui en el controlador..
echo $this->modelo->get_paises();
}
echo $this->modelo->get_ciudades($id);
}
echo $this->modelo->get_zonas($id);
}
}
/* End of file jcombo_c.php */
/* Location: ./application/controllers/jcombo_c.php */
Vista: jcombo_v.php

allowed');
}

if($submit){
$arrDatos['id_ciudad'] = $this->input-
>post('selCiudades');
}
}

}
}
}
}
Vista: jcombo_v.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title><?php echo $sTitulo; ?></title>

<script type="text/javascript" src="<?php echo base_url();
?>/js/jquery.js"></script>
?>/js/jcombo/jquery.jCombo.min.js"></script>

$(function() {

$("#selPaises").jCombo(
"<?php echo base_url(); ?>index.php/jcombo_c/get_paises",{
selected_value: "<?php echo empty($id_pais) ? 0 : $id_pais;
?>",
initial_text: "-- seleccione un país --"
});
$("#selCiudades").jCombo("<?php echo base_url();

?>index.php/jcombo_c/get_ciudades/",{
parent: "#selPaises", // combo padre
selected_value: "<?php echo empty($id_ciudad) ? 0 :
$id_ciudad; ?>",
initial_text: "-- seleccione una ciudad --"
});
$("#selZonas").jCombo("<?php echo base_url();

?>index.php/jcombo_c/get_zonas/",{
parent: "#selCiudades",
selected_value: "<?php echo empty($id_zona) ? 0 : $id_zona;
?>",
initial_text: "-- seleccione una zona --"
});
});
</script>
<style>
#form_ppal{
margin: 0 auto;
border: 1px dashed blue;
padding: 3px;
width: 500px;
}
#form_ppal p{
width: 100%;
font-weight: bold;
}
#form_ppal p label{
width: 70px;
font-weight: bold;
float: left;
text-align:right;
padding-right:3px;
margin-top:3px;
}
</style>
</head>
<body>
<?php
echo form_open('jcombo_c/index/1',array('id'=>'form_ppal'));// <form
..
echo '<p>',form_label('Paises: ')
,form_dropdown('selPaises',array(),'','id="selPaises"'),'</p
>';
echo '<p>',form_label('Ciudades: ')

,form_dropdown('selCiudades',array(),'','id="selCiudades"'),
'</p>';
echo '<p>',form_label('Zonas: ')

,form_dropdown('selZonas',array(),'','id="selZonas"'),'</p>'
;
echo '<p>',form_label('')
,form_submit(array('id'=>'btEnviar','value'=>'Enviar')),'</p>';
// si el formulario se recargo, mostramos los datos enviados..

if ($submit){
echo '<hr/><p>id_pais: ',$id_pais,'</p>';
echo '<p>id_pais: ',$id_ciudad,'</p>';
echo '<p>id_pais: ',$id_zona,'</p>';
}
echo form_close();// </form>

?>
</body>
</html>
La explicación del plugin está en el post citado, el script de la base de datos se encuentra en el paquete
de descarga oficial. La configuración de la base de datos es igual que siempre..
$db['default']['hostname'] = 'localhost';// mi servidor

$db['default']['username'] = 'root';// mi usuario en MySQl
$db['default']['password'] = '1234';// el password de mi usuario, si no tiene
no se coloca..
$db['default']['database'] = 'ci_jcombo';// el nombre de mi base de datos de
ejemplo
$db['default']['dbdriver'] = 'mysql';
Para el ejemplo use MySQl, pero esto no es limitante, puedes usar cualquier otro manejador de base de
datos.
Fuente: Cassianet >> https://cassianinet.blogspot.com/2012/04/ya-habiamos-hablado-del-jcombo-

plugin.html#ixzz5T9AnI01X
https://cassianinet.blogspot.com/2012/04/ya-habiamos-hablado-del-jcombo-
plugin.html#axzz5T8mQWwa0

Ya habíamos hablado del JCombo, plugin de Jquery que permite anidar facilmente
elementos select, es decir, disponer de combos dependientes. A continuación un ejemplo
de uso con CodeIgniter.
(clic para mostrar/ocultar código).
allowed');
class Jcombo_m extends CI_model{
function __construct(){
}
$query = $this->db
->query("SELECT id_country AS id, country_name AS descripcion
FROM countries ORDER BY descripcion ASC");
);
}

}else{

registros..")));
}
}
$query = $this->db
->query("SELECT id_city AS id, city_name AS descripcion
FROM cities WHERE id_country=?
);
}

}else{

registros..")));
}
}
$query = $this->db
->query("SELECT id_zone AS id, zone_name AS descripcion
FROM zones WHERE id_city=?
);
}

}else{

registros..")));
}
}
}
allowed');
}

if($submit){
$arrDatos['id_ciudad'] = $this->input->post('selCiudades');
}
}

}
}
}
}
Vista: jcombo_v.php

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title><?php echo $sTitulo; ?></title>

?>/js/jquery.js"></script>
?>/js/jcombo/jquery.jCombo.min.js"></script>

$(function() {

$("#selPaises").jCombo(
"<?php echo base_url(); ?>index.php/jcombo_c/get_paises",{
selected_value: "<?php echo empty($id_pais) ? 0 : $id_pais;
?>",
initial_text: "-- seleccione un país --"
});
$("#selCiudades").jCombo("<?php echo base_url();

?>index.php/jcombo_c/get_ciudades/",{
parent: "#selPaises", // combo padre
selected_value: "<?php echo empty($id_ciudad) ? 0 :
$id_ciudad; ?>",
initial_text: "-- seleccione una ciudad --"
});
$("#selZonas").jCombo("<?php echo base_url();

?>index.php/jcombo_c/get_zonas/",{
parent: "#selCiudades",
selected_value: "<?php echo empty($id_zona) ? 0 : $id_zona;
?>",
initial_text: "-- seleccione una zona --"
});
});
</script>
<style>
#form_ppal{
margin: 0 auto;
border: 1px dashed blue;
padding: 3px;
width: 500px;
}
#form_ppal p{
width: 100%;
font-weight: bold;
}
#form_ppal p label{
width: 70px;
font-weight: bold;
float: left;
text-align:right;
padding-right:3px;
margin-top:3px;
}
</style>
</head>
<body>
<?php
echo form_open('jcombo_c/index/1',array('id'=>'form_ppal'));// <form ..
echo '<p>',form_label('Paises: ')
,form_dropdown('selPaises',array(),'','id="selPaises"'),'</p
>';
echo '<p>',form_label('Ciudades: ')

,form_dropdown('selCiudades',array(),'','id="selCiudades"'),
'</p>';
echo '<p>',form_label('Zonas: ')

,form_dropdown('selZonas',array(),'','id="selZonas"'),'</p>';
echo '<p>',form_label('')
,form_submit(array('id'=>'btEnviar','value'=>'Enviar')),'</p>';
// si el formulario se recargo, mostramos los datos enviados..
if ($submit){
echo '<hr/><p>id_pais: ',$id_pais,'</p>';
echo '<p>id_pais: ',$id_ciudad,'</p>';
echo '<p>id_pais: ',$id_zona,'</p>';
}
echo form_close();// </form>

?>
</body>
</html>
La explicación del plugin está en el post citado, el script de la base de datos se encuentra
en el paquete de descarga oficial. La configuración de la base de datos es igual que
siempre..
$db['default']['hostname'] = 'localhost';// mi servidor
$db['default']['username'] = 'root';// mi usuario en MySQl
$db['default']['password'] = '1234';// el password de mi usuario, si no
tiene no se coloca..
$db['default']['database'] = 'ci_jcombo';// el nombre de mi base de datos
de ejemplo
$db['default']['dbdriver'] = 'mysql';
Para el ejemplo use MySQl, pero esto no es limitante, puedes usar cualquier otro manejador
de base de datos.
http://shinigamiwhite.blogspot.com/2012/04/jcombo-con-codeigniter.html
http://www.rephp.com/codeigniter-menu-desplegable-dependiente-con-jquery-y-ajax-
post.html
https://github.com/eboominathan/Dependent-Dropdown-in-Codeigniter-3.0.3
http://www.davidrojas.net/index.php/desarrollo-web/screencast-tutorial-ajax-con-jquery-en-
codeigniter/
Tutorial: Jquery UI autocomplete y Codeigniter

Después de un buen tiempo sin escribir por exceso de trabajo, vuelvo con el tutorial prometido
de como usar jquery UI autocomplete con codeigniter, es muy sencillo. Para comenzar vamos a
necesitar tener las librerías de jquery ui que se pueden descargar de la pagina oficial: aqui!,
podemos descargar un tema si queremos(yo descargue darkhide) , y por supuesto tener
codeigniter.
Paso 1: Preparando el terreno.

Primero tenemos que crear un controlador que yo le voy a llamar autocomplete, una vista con
el mismo nombre y una base de datos de usuarios que se van a mostrar.
En el código del controlador debemos por ahora agregar la carga de nuestra vista y la carga de
el driver para base de datos y el uri helper que nos ayudara.
Código de controlador inicial:
allowed');
class Autocomplete extends CI_Controller {

function __construct()
{
}
public function index()
{
$this->load->view('autocomplete');
}
}
/* End of file welcome.php */

/* Location: ./application/controllers/autocomplete.php */
En el código de vista solo debemos poner el enlace a el css y js de jquery ui, para facilitarnos la
vida nos ayudaremos con la función base_uri que nos permitirá darle una ruta absoluta.
Código vista:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>jQuery UI Autocomplete Ejemplo</title>
<link type="text/css" href="<?php echo base_url(); ?>css/dark-
hive/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
?>js/jquery-1.4.4.min.js"></script>
?>js/jquery-ui-1.8.10.custom.min.js"></script>
</script>
</head>
<body>
</body>
</html>
Y por ultimo crearemos una pequeña Base de datos de usuarios con solo un id y nombre de
usuario, así:
CREATE TABLE àutocomplete`.ùsuarios` (

ìd` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
ùser` VARCHAR( 80 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOTNUL
L
);
INSERT INTO ùsuarios` (ìd`, ùser`) VALUES

(1, 'mariano'),
(2, 'jose'),
(3, 'juan eduardo'),
(4, 'juan pedro'),
(5, 'no se uqe'),
(6, 'no se uqe mas');
Lo ultimo de este paso es configurar nuestra base de datos y ya debería cargar una pagina en
blanco.
Paso 2: Configurando nuestra vista con

autocomplete.
Ahora debemos configurar en la vista el autocomplete, solamente debemos agregar en el
cuerpo un input text, y dentro de las etiquetas script la configuracion del autocomplete que va a
ser referencia a una función que despues crearemos en nuestro controlador que se llamara
ajax. Asi nos debería ir quedando la vista:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>jQuery UI Autocomplete Ejemplo</title>
<link type="text/css" href="<?php echo base_url(); ?>css/dark-
hive/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
?>js/jquery-1.4.4.min.js"></script>
?>js/jquery-ui-1.8.10.custom.min.js"></script>
$('#autocomplete').autocomplete({source:'<?php echo
site_url('autocomplete/ajax'); ?>'});
});
</script>
</head>
<body>
<p><label for='autocomplete'>Nombre de Usuario: </label><input
type='text' id='autocomplete'></p>
</body>
</html>
Paso 3: Empezando con el controlador.(Input Class)

En el controlador debemos crear una función llamada ajax que sera la encargada de enviar en
formato json los datos para el autocomplete, para esto vamos a usar el Active Record Class de
Codeigniter y el input class.
El codeigniter trae una clase ya echa y precargada para lo que son los input, esta libreria
incluye funciones muy utiles:
1. Pre-procesa todas las variables de entrada por seguridad.

2. Provee algunas funciones para procesar las variables enviadas y pre-
procesarlas.
Esta libreria nos provee una función que se llama $this->input->get(), esta función permite dos
parametros el primero es para saber que variable de $_GET requerimos y el segundo
establecer el filtrado en true(activado) o false(desactivado). La otra ventaja de esta función es
que no nos va a dar error si nuestra variable no fue definida, ya que si la variable no fue
definida devuelve un false. en nuestro caso agregariamos lo siguiente al código:
if($buscar=$this->input->get('term'))
{
}
Paso 4: Usando Active Record Class para buscar en

la base de datos.
Continuamos con el active record class, esta clase trae funciones para seleccionar, insertar,
eliminar y modificar ya predefinidas que nos pueden ahorrar muchas lineas de código ademas
de que con estas funciones ya todo va pre-filtrado contra posibles ataques.
lo primero es ver la función basica de select, $query=$this->db->get('usuarios') esta función

haria simplemente un "select * from usuarios" y devuelve un objeto en $query. Como queremos
buscar dentro de user los usuarios que tengan un nombre parecido a el termino de busqueda,
debemos usar la función $this->db->like(), que recibe dos parametros, en uno la columna en la
que deseamos buscar y el otro lo que deseamos buscar. Y por ultimo usaremos la funcion
$this->db->select(), para poder especificar que columnas queremos y como las queremos: a la
final nuestra funcion nos quedaria asi:
$this->db->select('id, user as value');
$this->db->like('user', $buscar);
$query=$this->db->get('usuarios');
Que generaria algo asi "SELECT ìd`, ùser` as value FROM (ùsuarios`) WHERE user` LIKE
'%$buscar%'"
Ahora solo debemos verificar que la respuestasea mayor que 0, pero en ves de usar el clasico
mysql_num_rows usaremos $query->num_rows() > 0, y para listar los resultados en ves de
while ($row = mysql_fetch_array($result) ) usaremos foreach ($query->result_array() as $row).
y por ultimo usamos la funcion json_encode para pasar nuestro array al formato json.
Condigo de la funcion ajax():

function ajax()
{
if($buscar = $this->input->get('term'))
{
$this->db->select('id, user as value');
$this->db->like('user', $buscar);
$query=$this->db->get('usuarios');
if($query->num_rows() > 0)
{
foreach ($query->result_array() as $row)
{
$result[]= $row;
}
}
echo json_encode($result);
}
}
Con esto ya queda listo nuestro autocomplete solo queda probarlo.
Nota:
 Si usan php 5 pueden usar el Method Chaining que les permite hacer los select en una
sola linea.
 Es buena idea limitar el numero de filas que vamos a devolver con agregar $this->db-
>limit(10); es suficiente.
 Este metodo devulve el id de el usuario a el autocomplete, podemos agregar al
autocomplete el siguiente codigo para usar en algo esa info:
select: function( event, ui ) {
alert(ui.item ?
"Selected: " + ui.item.id :
"Nothing selected, input was " + this.value );
}
http://sosinformatico.blogspot.com/2011/03/tutorial-jquery-ui-autocomplete-y.html
https://www.youtube.com/results?search_query=webslesson+codeigniter
CodeIgniter error desplegable

dependiente
Este es mi código. No funciona con CodeIgniter 3.0 y jQuery. Necesito usar desplegable
dependientes así que hice eso, sino que será ocurre un error ... pantalla
por alert()después de elegir cualquier elemento de primera desplegable.
Por favor, eche un vistazo a mi código fuente. No sé lo que está mal. Gracias a todos
VER:
<script type=text/javascript>
$('#senf').on('change', function(){
var senf_id = $(this).val();
if(senf_id == '')
{
$('#raste').prop('disabled', true);
}
else
{
$('#raste').prop('disabled', false);
$.ajax({
url:<?php echo base_url() ?>index.php/shoppings/get_subgr
oup/,
type: POST,
data: {'senf_id' : senf_id},
dataType: 'json',
success: function(data){
alert('okkk');
},
error: function(){
alert('Error occur...!!');
}
});
}
});
});
</script>
<div class=form-group >
<label for=group_name class=control-label col-lg-2>group 1</label>
<select id=senf name=group>
<option value= selected=selected>select</option>
<?php
foreach ($get_groups as $value) {
$group_id = $value['group_shop_id'];
$group_name = $value['group_shop_name'];
?>
<option value=<?php echo $group_id; ?>> <?php echo $group_name; ?> </opti
on>
<?php } ?>
</select>
<label for=raste >group 2</label>

<select id=raste name=raste>
<option value=>select</option>
</select>
</div>
CONTROLADOR:
public function get_subgroup(){

$id = $this->input->post('senf_id');
$ajax_get_subgroup = $this->shopping_model->ajax_get_subgroup($id);
$pro_select_box = '';
$pro_select_box .= '<option value=>Select Province</option>';
foreach($ajax_get_subgroup as $ajax_get_subgroup_value){
$pro_select_box .= '<option>'. $ajax_get_subgroup_value->cat_shop
_name .'</option>';
}
echo json_encode($pro_select_box);
}
MODELO:
public function ajax_get_subgroup($id){

$query = $this->db->get_where('cat_shopping_group', array('group_shop_id'
=> $id));
return $query->result();
}
1 respuestas
prueba esto
Controlador
public function ajax_get_subgroup()

{
extract($_POST);
$tmp='';
$sql = "SELECT * FROM cat_shopping_group where group_shop_id=$id";
$data = $this->db->query($sql)->result_array();
$tmp .="<option value=''>-- Select --</option>";
foreach($data as $row)
{
$tmp .="<option value='".$row['your_id']."'>".$row['cat_shop_name '].
"</option>";
}
die($tmp);
}`
AJAX
function get_data()
{
var id = $('#senf').val()
datana= 'id='+id
$.ajax({
type: 'POST',
url: '<?=base_url()?>your_controller/ajax_get_subgroup',
data: datana,
error: function(data) {
alert('Failed');
},
success: function(data)
{
$('#raste').html(data)
}
})
}
Puntos de vista
<select id="senf" name="group" onchange='ajax_get_subgroup();'>

<option value="" selected="selected">select</option>
<?php
your code
?>
</select>
<select id="raste">
</select>
Espero que esto ayude.

https://coredump.uno/questions/47023501/codeigniter-dependent-dropdown-error
016 - Select dinâmico com dados do
banco de dados - codeigniter
https://www.youtube.com/watch?v=SEwDQmCSoIc
https://wiki.askprime.space/blog/tutorial-codeigniter
Como fazer um select dinâmico de

Estados/Cidades com CodeIgniter 3.x
https://www.youtube.com/watch?v=LuC0olmGlbk
Tutorial CodeIgniter Combobox en

cadena
https://www.youtube.com/watch?v=wgfbuVif-2o

Select Dependientes en PHP Usando Codeigniter Con Jquery

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Select Dependientes en PHP Usando Codeigniter Con Jquery

Transféré par

Droits d'auteur :

Formats disponibles

Select dependientes en php usando

Codeigniter con jquery

En este ejemplo cargaremos un primer select con tipos de bebida(ron,ginebra…) y el

<select name=“marca” id=“marca”>

Combos dependientes con

Ahora ya podemos acceder al proyecto desde

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

cuando se cambie el valor del select con id categoría el script manda la

Y finalmente le decimos que el valor que nos devuelva la función

No cabe decir que necesitamos cargar la librería de jquery para que

Creamos el controlador llenacombo

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

class Micombo extends CI_Controller

Creamos lo básico, la función index en la que cargamos la vista con la

Invito a todo el mundo a visitar mi web de anuncios clasificados que

Inputs dependientes con codeigniter

<div class="row clearfix">

<div class="form-group form-float">

<input type="text" class="form-control" id="aduana"

name="aduana" pattern="[A-Za-z,.&]{4-16}" required>

<div class="form-group form-float">

<input type="text" class="form-control" id="nombreAduana"

name="nombreAduana" pattern="[A-Za-z,.&]{4-16}" required>

//echo '<script language="javascript">alert("entro al

//verificamos si la aduana existe.

Espero puedan ayudarme, de antemano gracias

Inputs dependientes con codeigniter

Y lo verificas con jQuery:

'e resultado será 0';

Inputs dependientes con codeigniter

Al final quedo así.

Función del controlador tramite [Codeigniter]

public function verifica_aduana()

//verificamos si la aduana existe.

<h5 style="color:blue" ><?=$fila-

<h5 style="color:blue" ></h5>

$.post("../tramite/verifica_aduana", {aduana : aduana},

if(data === null|| data===''){

alert('CODIGO DE ADUANA NO EXISTE\n intente de nuevo');

<div class="form-group form-float">

<input type="text" class="form-control" id="aduana"

name="aduana" pattern="[A-Za-z,.&]{4-16}" required>

<div class="col-sm-3" id="nombreAduana">

Ver el vídeo donde muestra cómo hacer un select dinámico con

Es muy común hoy en día necesitar de sitios donde hay selectos

Pero qué son incluso selects o combos dinámicos?

El ejemplo clásico para explicar esto es el de Estados y Ciudades. En

Cuando el usuario escoge un estado, automáticamente el combo de

Veamos el ejemplo de cómo hacer algo hoy en CodeIgniter . Vamos a

La idea aquí es la siguiente: vamos a imaginar que estamos

El primer select contendrá los Departamentos, y el segundo select

La primera tabla será la de departamentos. Será una tabla muy

`departamentos_id` int(11) NOT NULL AUTO_INCREMENT,

PRIMARY KEY (`departamentos_id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Ahora, la tabla PRODUCTOS. También será muy simple. Tendrá los

`produtos_id` int(11) NOT NULL AUTO_INCREMENT,

`produtos_id_departamento` int(11) NOT NULL,

`produtos_nome` varchar(255) NOT NULL,

PRIMARY KEY (`produtos_id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

En esta tabla, tenga en cuenta el campo

No voy a crear aquí la parte de inserción de datos en las