Llenar combo con Ajax y PHP
Escrito por giancarloMar 10
He visto muchas preguntas en foros de cómo poder modificar un combo según el valor que el visitante selecciona de otro. Esto es más sencillo de lo que muchos creen. Con este video vamos a ver cómo poder modificar un combo utilizando Ajax. En mi caso uso JQuery pero no es necesario, ya lo verán.
Conocer más de JQuery
Conocer más de JSON
Descarga el Add-on Firebug que utilizo en el tutorial
Acerca de la función Sleep en PHP
Excelente tutorial,
Una pregunta, si quisiera utilizarlo o adaptarlo a asp en lugar de php, es básicamente lo mismo?, puedo utilizar JQuery ? o la modificación es más ocmpliacada.
Gracias
Hola,
Estuve tratando de hacerlo en un htm pero me da error de Object Expected, esto es lo que hice:
Untitled 1
function LimpiarCombo(combo) {
while (combo.length > 0) {
combo.remove(combo.length-1);
{
}
function SeleccionandoCombo(combo1,combo2){
combo2 = document.getElementById(combo2);
LimpiarCombo(combo2);
if (combo1.options[combo1.selectedIndex].value != ”) {
//llamar ajax
}
}
Seleccione un item
Opcion 1
Opcion 2
Opcion 3
Opcion 1
Opcion 2
Opcion 3
Que bueno que te haya gustado. Pero en tu script tienes un error, después de “combo.remove(combo.length-1);” abres llaves, no abras esa llave, debe ser cerrada.
Perfecto, gracias.
Una pregunta, tiene conocimiento de asp?
Saludos,
Verdad, sobre lo del ASP. Es lo mismo, solo debes devolver el formato en JSON para que funcione, al final no importa el lenguaje que uses de back-end, lo importante es que devuelvas un formato de json, para este ejemplo.
Personalmente te recomiendo que dejes ASP y veas más PHP. Revisa en internet (google) las ventajas y desventajas, pero ese es otro tema.
Suerte!
Ok, voy a empezar a leer PHP, lo que pasa es que me fue más fácil aprender ASP porque venía de una escuela de puro Visual Basic.
Ahora mismo lo estoy tratando de montar en ASP pero me sale error:
Adjunto script y el código ASP:
”
function LlenarCombo(json, combo) {
combo.options[0] = new option (‘Seleccione un item’,”)
for (var i=0;i 0) {
combo.remove(combo.length-1);
}
}
function SeleccionandoCombo(combo1, combo2){
var i
combo2 = document.getElementById(combo2);
//for (i=0; combo2.length > 0; i++) {
// combo2.remove(combo2.length-1)
//}
LimpiarCombo(combo2);
if (combo1.options[combo1.selectedIndex].value != ”) {
combo1.disabled = true;
combo2.disabled = true;
$.ajax({
type: ‘get’,
dataType: ‘json’,
url: ‘materias_ajax.asp’,
data: {valor: combo1.options[combo1.selectedIndex].value,
success: function (json) { LlenarCombo(json, combo2);}
combo1.disabled = false;
combo2.disabled = false;
})
}
}
”
ASP
DESPUES DE CONECTADO A LA BASE DE DATOS
“strSql=”Select * from tblMaterias”
Set rstMat=base.Execute(strSql)
while not rstMat.EOF
materias=array(rstMat.Fields(“materia”))
valor=array(rstMat.Fields(“id”))
rstMat.MoveNext
Wend
Response.write json_encode(materias,valor)”
Como lo ve?
Saludos,
Está bien… pero existe la función “json_encode” en ASP? Esa función es de PHP, para convertir un arreglo al formato JSON.
chevere el tutorial pero bueno no me sale
el ajax
utilizo el php editot y solo me sale el 1º combo pero no amarra al segundo
no son dependientes que me aconsejas
necesito ayuda utilizo una bd mysql, ene verdad necesito ayuda llevo un mes en este problema.
si quieres te puedo adjuntra mi codigo:
ajax.php:
1,’data’=>’Valor 1.1′);
$_arreglo[]=array(‘id’ => 2,’data’=>’Valor 1.2′);
$_arreglo[]=array(‘id’ => 3,’data’=>’Valor 1.3′);
break;
case ‘opcion2′:
$_arreglo[]=array(‘id’ => 1,’data’=>’Valor 2.1′);
$_arreglo[]=array(‘id’ => 2,’data’=>’Valor 2.2′);
$_arreglo[]=array(‘id’ => 3,’data’=>’Valor 2.3′);
break;
case ‘opcion3′:
$_arreglo[]=array(‘id’ => 1,’data’=>’Valor 3.1′);
$_arreglo[]=array(‘id’ => 2,’data’=>’Valor 3.2′);
$_arreglo[]=array(‘id’ => 3,’data’=>’Valor 3.3′);
break;
}
echo json_encode($_arreglo);
?>
select.php
——————
Formulario
function LimpiarCombo(combo){
while(combo.length>0){
combo.remove(combo.length-1);
}
}
function LlenarCombo(json,combo){
combo.options[0] = new Option(‘Selecciona un item’,”);
for(var i=0;i<json.length;i++){
combo.options[combo.length]= new Option(json[i].data, json[i].id);
}
}
function SeleccionandoCombo(combo1,combo2){
combo2= document.getElementById(combo2);
LimpiarCombo(combo2);
if(combo1.options[combo1.selectedIndex].value != '')
{
$.ajax({
type: 'get',
dataType: 'json',
url: 'ajax.php',
data: {valor: combo1.options[combo1.selectedIndex].value},
sucess: function(json){
LlenarCombo(json, combo2);}
});
}
}
Selecciona 1
Opcion1
Opcion2
Opcion3
Selecciona 2
Opcion1
Opcion2
Opcion3
Hola a todos los que tienen dudas y han tenido problemas. He subido el ejemplo, pueden ver el link debajo del video.
Gracias por visitarme, no se olviden de ver otros artículos o si tienen alguna idea de uno nuevo, bienvenida sea.
hey man bueno hay un pequeño error en tu codigo
while(combo.length > 0) —-> es de esta manera
bueno man tengo un problema que lo vengo dando vueltas ahce dias nose si puedes ayudarme bueno mi problema es el siguiente uso combos dependientes que sean multiselectores de la siguiente manera
REGION—–>CIUDAD—–>USUARIO
CATEGORIA—–>PRODUCTO
bueno nose si te puedo pasar el codigo que tengo lo tengo avanzado
nose si me puedes dar tu correo en verdad necesito ayuda. no encuentro la respuesta.
index.php
<div id="content_old" style="display:”>
Para ingresar al sistema de consultas WEB del Aplicativo MI. Debe dar clic en “Iniciar sesión”
en el lado superior derecho del panel que se ubica en esta página.
©2009-2010 Trade Marketing Solutions S.A.C. Todos los Derechos Reservados.
<div id="content" style="display:”>
Fecha Inicial:
FSfncWriteFieldHTML(“DateForm”,”MyDate1″,”Ninguna”,120,”images/FSdateSelector/”,”ES”,false,true)
Fecha Final:
FSfncWriteFieldHTML(“DateForm”,”MyDate2″,”Ninguna”,120,”images/FSdateSelector/”,”ES”,false,true)
Region:
Ciudad:
<!—->
Selecciona opción…
<!—->
Mercaderista:
Selecciona opción…
<?php
function generaSelect()
{
include 'conexion.php';
conectar();
$consulta=mysql_query("SELECT coddistrito, nomdistrito FROM tbl_distrito ORDER BY coddistrito ");
desconectar();
// Voy imprimiendo el primer select compuesto por los paises
echo "”;
echo “Elige”;
while($registro=mysql_fetch_row($consulta))
{
echo “”.$registro[1].”";
}
echo “”;
}
?>
<!—->
<!–
Selecciona opción…
–>
<!–
–>
<?
function generaSelect1()
{
include 'conexion.php';
conectar();
$consulta1=mysql_query("SELECT codigo_categoria,descripcion_categoria FROM tbl_categoria_producto ORDER BY codigo_categoria");
desconectar();
// Voy imprimiendo el primer select compuesto por los paises
echo "”;
echo “Elige”;
while($registro1=mysql_fetch_row($consulta1))
{
echo “”.$registro1[1].”";
}
echo “”;
}
?>
Categoria:
Producto:
<!—->
Selecciona opción…
<!—->
esta utiliza un pagina proceso.php que es la que realiza el proceso
“tbl_distrito”,
“select2″=>”tbl_ciudad”,
“select3″=>”tbl_usuario”
);
function validaSelect($selectDestino)
{
// Se valida que el select enviado via GET exista
global $listadoSelects;
if(isset($listadoSelects[$selectDestino])) return true;
else return false;
}
function validaOpcion($opcionSeleccionada)
{
// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
if(is_numeric($opcionSeleccionada)) return true;
else return false;
}
$selectDestino=$_GET["select"];
$opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
include ‘conexion.php’;
conectar();
if($tabla==’tbl_ciudad’)
$consulta=mysql_query(“SELECT idciudad, nomciudad FROM $tabla WHERE coddistrito=’$opcionSeleccionada’”) or die(mysql_error());
else
$consulta=mysql_query(“SELECT idusuario, nomusuario FROM $tabla WHERE idciudad=’$opcionSeleccionada’”) or die(mysql_error());
desconectar();
// Comienzo a imprimir el select
echo “”;
echo “Elige”;
while($registro=mysql_fetch_row($consulta))
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
$registro[1]=htmlentities($registro[1]);
// Imprimo las opciones del select
echo “”.$registro[1].”";
}
echo “”;
}
$listadoSelects=array(
“select4″=>”tbl_categoria_producto”,
“select5″=>”tbl_producto”);
function validaSelect($selectDestino)
{
// Se valida que el select enviado via GET exista
global $listadoSelects;
if(isset($listadoSelects[$selectDestino])) return true;
else return false;
}
function validaOpcion($opcionSeleccionada)
{
// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
if(is_numeric($opcionSeleccionada)) return true;
else return false;
}
$selectDestino=$_GET["select"];
$opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
include ‘conexion.php’;
conectar();
if($tabla==’tbl_producto’)
$consulta=mysql_query(“SELECT codproducto, nomproducto FROM $tabla WHERE codigo_categoria=’$opcionSeleccionada’”) or die(mysql_error());
else
$consulta=mysql_query(“SELECT idusuario, nomusuario FROM $tabla WHERE idciudad=’$opcionSeleccionada’”) or die(mysql_error());
desconectar();
// Comienzo a imprimir el select
echo “”;
echo “Elige”;
while($registro=mysql_fetch_row($consulta))
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
$registro[1]=htmlentities($registro[1]);
// Imprimo las opciones del select
echo “”.$registro[1].”";
}
echo “”;
}
?>
Init( ‘sample1′, “arrow_on1.gif”, “arrow_off1.gif”,”arrow1″, “optionTextBox1″, “optionDiv1″, “cell1″, “cellHover1″, “cellSelected1″ );
Init( ‘sample2′, “arrow_on1.gif”, “arrow_off1.gif”,”arrow1″, “optionTextBox2″, “optionDiv2″, “cell2″, “cellHover2″, “cellSelected2″ );
Init( ‘sample3′, “arrow_on1.gif”, “arrow_off1.gif”,”arrow1″, “optionTextBox3″, “optionDiv3″, “cell3″, “cellHover3″, “cellSelected3″ );
utilizan tambien un multicombos.js y multicombos.css
ESCRIBEME A MI CORREO LA SOLUCION AVER SI ME HACES VER MI ERROR parionashark@gmail.com
Qué error tienes? Ahora que es feriado me voy de viaje. Pero para la próxima semana haré un tipo de extensión del tutorial para llenar varios combos
Así no vas a aprender jejejeje.
En estos días haré una extensión del tutorial para manejar varios combos, no olvides que también existen foros como http://www.forosdelweb.com por si tienes dudas en tus desarrollos.
El tutorial en general está muy bien.
También puedes poner:
data:’valor=’+comboProvincias.options comboProvincias.selectedIndex].value+”,
Sirve igual.
Enhorabuena por el tutorial, me ha sido de gran ayuda.
giancarlo, cuando pruebo tu código no me sale nada y en el internet explorer me sale que la página se cargo con errores al darle click me sale:
Detalles de error de página web
Mensaje: ‘length’ is null or not an object
Línea: 25
Carácter: 14
Código: 0
URI: http://192.168.1.8/sisbiblio09/combo_ajax/index.html
y lo mismo me ha salido cuando he tratado de hacerlo con valores de una base de datos (postgres).
cual crees que sea el problema, me parece que es el json_encode, porque cuando lo pruebo no se muestra nada en el iexplorer.
Saludos.
hola giancarlo, tu tutorial de verdad me impresiono y mas que todo porque no domino mucho ajax, la pregunta ke te quiero hacer es si podrias hacerlo pero con conexion a base de datos.
Es ke a mi me han dado un problema parecido en el lugar en donde estudio, solo que en mi caso de un combo a un .
Mi idea es listar los campos que hay en una base de datos por cada item que seleccione del combobox utilizando ajax.
Aqui esta lo que estoy haciendo por el momento :
index.php
======
Genero Musica
<?php
$link=mysql_connect('localhost','root','');
$select=mysql_select_db('tiendadiscos') or die('No hay BD');
$cadena="select Codigo,Genero from musica group by Genero";
$sql=mysql_query($cadena);
if($reg=mysql_fetch_array($sql)){
echo "”;
echo “SELECCIONA”;
do{
echo “”.$reg['Genero'].”";
}while($reg=mysql_fetch_array($sql));
echo “”;
};
?>
Base de datos :
=========
create database tiendaDiscos;
use tiendaDiscos;
create table musica(
Codigo int auto_increment primary key not null,
Titulo varchar(30) not null,
Genero varchar(30) not null,
Precio double not null,
Stock int not null
);
insert into musica values(’1′,’Crazy’,'pop’,’12.5′,’20′);
insert into musica values(’2′,’Bad Day’,'pop’,’15.5′,’22′);
insert into musica values(’3′,’No Morira’,'salsa’,’15.5′,’15′);
insert into musica values(’4′,’Volvere’,'salsa’,’20.5′,’20′);
insert into musica values(’5′,’Call Me’,'pop’,’30.5′,’30′);
insert into musica values(’6′,’bachata rosa’,'romantica’,’30.5′,’5′);
insert into musica values(’7′,’VIVIRE’,'romantica’,’10.5′,’21′);
insert into musica values(’8′,’LLévame’,'pop’,’15.5′,’20′);
insert into musica values(’9′,’Earth Song’,'pop’,’50.5′,’15′);
insert into musica values(’10′,’SERA’,'romantica’,’16.5′,’20′);
Nota : Utilizo wampserver como servidor web.Salu2
Aqui hay una imagen que simula lo que quiero hacer :
http://lh3.ggpht.com/_SXzJK04AjjA/TAKSmBzcd-I/AAAAAAAABHU/firslDI2lL4/Disco%20Tienda.jpg
Pero si esto no es un foro! jajajajaja…
Mira, qué te parece si haces una página que solo tenga la tabla (table) con la información de la base de datos, pero esta información que aparece es en base a un valor que mandas por “GET”. Osea según ese valor, se muestra un resultado, como lo estás haciendo.
Ok, entonces modificas un poco el código que te doy. En vez de modificar el combo2, haces que se muestre en un DIV ese HTML que hiciste mediante ajax.
Si tienes problemas con el PHP o Mysql, te recomiendo que lo discutas en un foro, porque ahí podrás tener varias comentario e ideas hasta llegar a una solución y luego haces lo que te comento.
Saludos,
GiancarloSpot
Hola.
¿¿Como se haria para usar datos de una base de datos en vez de un arreglo ya establecido??
PD: Tienes un fallo en el codigo que se puede descargar, en la linea 19 del index.html es combo.length, esta mal escrito length. Es una tonteria pero por si a alguno le falla y no lo ve…
Hola giancarlo, lindo nombre asi se llama mi hijo, jajajaja, bueno soy nueva en la programacion en php y me asignaron un programa para consultar el catálogo de las publicaciones de la universidad, en el tengo vrios formularios como logín, inicio que este te lleva a la consulta, registro de usuario, consignacion de libro, obsequio y venta, he querido colocar un combobox en el de obsequio y venta para que al escribir el nombre del libre pueda seleccionar el autor ya que se tienen el mismo titulo pero con diferentes autores y no consigo como hacerle la coneccion la base de datos, si pudieras ayudarme….
Registro de Libros
body {
background-image:url(imagen/);
background-position:center top;
background-repeat: no-repeat;
}
.Estilo5 {font-size: x-small}
.Estilo9 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
Registro de Venta
Nombre:
Cédula:
Dirección:
Teléfono:
Título:
Autor:
“)
print (“Seleccione el Autor”)
Colección:
Cod_Libro:
Pvp:
Isbn:
Cantidad:
Fecha:
<?php // verificamos si se han enviado ya las variables necesarias.
if (isset($_POST["nombre"])){
$nombre = $_POST["nombre"];
$c_d= $_POST["c_d"];
$direccion = $_POST["direccion"];
$telefono = $_POST["telefono"];
$nb_libro = $_POST["nb_libro"];
$nb_autor= $_POST["nb_autor"];
$co_cole = $_POST["co_cole"];
$cod_lib = $_POST["cod_lib"];
$pvp = $_POST["pvp"];
$isbn = $_POST["isbn"];
$cantidad= $_POST["cantidad"];
$fecha = $_POST["fecha"];
// Hay campos en blanco
// Comprobamos si el nombre de usuario o la cuenta de correo ya existían
//conectar();
$query = "INSERT INTO det_libros (nombre,c_d,direccion,telefono,nb_libro,nb_autor,co_cole,cod_lib,pvp,isbn,cantidad,fecha)
VALUES ('$nombre','$c_d','$direccion','$telefono','$nb_libro','$nb_autor','$co_cole','$cod_lib','$pvp','$isbn','$cantidad','$fecha')";
mysql_query($query) or die(mysql_error());
//echo 'El Registro fue ‘.$titulo.’ ha sido registrado de manera satisfactoria. ‘;
}
}
formRegistro();
?>
<?php
// Declaro la variable $det_libro que es la que me va a indicar si hay que volver a cargar los datos de los modulos
$det_libro="Detalle";
//Muestra el combobox de Detalle una vez que se haya elegido el Título, no antes
if (!isset($detalle)){
$detalle="0";
}
$sql="select * from detalles order by 2";
$resultado=mysql_query($sql);
while($fila=mysql_fetch_array($sql)){
print("$fila[detalle]\n”);
}
print(“”);
if ($detalle!=”0″){
print(”
det_libro:
“);
$sqlprov=”select * from Autor where id_detalle=’$detalle’ order by 2″;
$resautor=mysql_query($sqlautor);
while($filautor=mysql_fetch_array($resautor)){
print(“$fillibro[autor]“);
}
print(”
“);
}
?>
Hola cariño, este es otro error que tengo en el modulo de inicio y sería de mucha ayuda si me ayudras a entender un poco, gracias muak!!!!
$cantReg) $cant=$cantReg;
// Numero de Columanas de la Tabla
$numColumnas = mysql_num_fields($cursor);
echo “”;
echo “”;
for($i=0; $i<$numColumnas; $i++){ // Generando la Cabecera de la Tabla segùn los Nombres de los registro del cursor
echo "“.mysql_field_name($cursor,$i).”“; //pg_field_name($cursor,$i)
}
echo “”;
$indice=0;
while ($indice<$cant) { // Pinta la tabla
$sw=true;
$arr=$row = mysql_fetch_row($cursor);//g_fetch_array($cursor,$indice);
$indice++;
echo "”;
for ($i=0; $i<$numColumnas; $i++) {
if($arr[$i] == '')
$arr[$i]="-";
$textTypeCol = mysql_field_type($cursor,$i);
if($textTypeCol == 'numeric')
{$textAlineacion = 'right'; }
else
{$textAlineacion = 'left'; }
// Es un reglon normal de dato
if($i==0)
{
if($Tip==1)
echo "$arr[$i]“;
elseif($Tip==0)
echo “$arr[$i]“;
}
else
echo “”.$arr[$i].”";
} //fin del For
echo “”;
if($sw==false){
echo “”;
echo “No Hay Datos para Mostrar”;
echo “”;
}
}
echo “”;
}
?>
cuando corro el programa me sale los siguientes avisos
Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\Archivos de programa\EasyPHP-5.3.2i\www\inventario\libreria.php on line 20
Warning: mysql_num_fields() expects parameter 1 to be resource, boolean given in C:\Archivos de programa\EasyPHP-5.3.2i\www\inventario\libreria.php on line 25
disculpa te copie lo que no era, es que me tiene loca php jejejejeje
$cantReg) $cant=$cantReg;
// Numero de Columanas de la Tabla
$numColumnas = mysql_num_fields($cursor);
echo “”;
echo “”;
for($i=0; $i<$numColumnas; $i++){ // Generando la Cabecera de la Tabla segùn los Nombres de los registro del cursor
echo "“.mysql_field_name($cursor,$i).”“; //pg_field_name($cursor,$i)
}
echo “”;
$indice=0;
while ($indice<$cant) { // Pinta la tabla
$sw=true;
$arr=$row = mysql_fetch_row($cursor);//g_fetch_array($cursor,$indice);
$indice++;
echo "”;
for ($i=0; $i<$numColumnas; $i++) {
if($arr[$i] == '')
$arr[$i]="-";
$textTypeCol = mysql_field_type($cursor,$i);
if($textTypeCol == 'numeric')
{$textAlineacion = 'right'; }
else
{$textAlineacion = 'left'; }
// Es un reglon normal de dato
if($i==0)
{
if($Tip==1)
echo "$arr[$i]“;
elseif($Tip==0)
echo “$arr[$i]“;
}
else
echo “”.$arr[$i].”";
} //fin del For
echo “”;
if($sw==false){
echo “”;
echo “No Hay Datos para Mostrar”;
echo “”;
}
}
echo “”;
}
?>
Entonces tu problema no es poder hacer que mi tutorial funciona, sino tienes un problema en base de datos. Te recomiendo que busques ayuda en un foro o con nuestro muy amigo Google.
Bien, solicité tu ayuda porque vi tu tutorial es muy bueno en realidad porque lo explicas de manera muy sencilla y pensé que podrías ayudarme con lo que quiero hacer, de todas maneras muchas gracias seguiré buscando sin embargo volveré a ti por si necesitara una asesoría, claro si estás disponible de tiempo, gracias !!!! Que estés bien.
Hola, de pura casualidad sabes que puedo agregarle a mi codigo para que el navegador IE me muestre los resultados ??, estoy usando ajax y asp. Es de esto mismo, llenar un segundo combo dependiendo del primero, se consulta y todo bien en todos los exploradores a excepcion de IE, busque en internet y parece que es algo comun S: he estado queriendo arreglarlo pero nada me funciona, y no me puedo cambiar a php por que necesito hacerlo en asp. Alguna idea?
El ejemplo que uso es suficiente, funciona en todos los navegadores. Si quieres utiliza Jquery.
No importa si es PHP, ASP, JAVA… solo que en mi ejemplo devuelvo los resultados en el formato json
Muchas gracias, excelente