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
Hola a todos,
Muy buen video tutorial.
Para quien preguntaba lo de JSON en ASP, si es ASP clásico, existe una librería gratuita que hace la mismo que el JSON_ENCODE de PHP: Solo hay que buscar JSON_2.0.4.asp en google.
Suerte!
Muy buen tutorial te felicito pero para los usuarios como que solo sabe php, creo que es un poco complicado, entender lo de jquery y jason ,
no se por que y que hace cuando los llamas.. deverias explicar antes estos dos puntos jquery, json
hola amigo exelente tuto pero me gustaria hacerlo con 3 combox
Con 3 combos? Bueno es igual…
Ves que ahí le digo al combo 1 que cuando haga un cambio llame a una función, mira si quieres repite las funciones y dales otros nombres, al combo 2 le dices que cuando cambie se vaya a la función que crees, claro que puedes reducir las cosas modificando la función que he hecho para que sea más dinámica aun… Ahí está tu creatividad =D
Saludos
hola esta muy bueno el combo el mas facil que he utilizado y mas facil de aprander, pero hay algo q no he podido hacer y quiero hacer: como paso el dato seleccionado del combo uno a un $_GET PHP.
No entiendo bien… por el ajax estás enviando el valor de manera “get” y lo recuperas con el PHP
gracias por tu respuesta tan rapida, lo que intento hacer es lo siguiente:
en el combo1 quiero q se selecccione un nivel educativo ya sea kinder, primaria, secundaria o facultad.
en el combo2 quiero que se seleccione el grado escolar, por ejemplo en secundaria hay 3 grados escolares 1 de sec, 2 de sec y 3 de sec.
la pregunta, como le hago, para que a la hora de enviar el formulario a un archivo php receptor, pueda recoger el nivel seleccionado en el combo1 y junto con el grado del combo2 y este archivo php los reciba en un $_get los pase a variables y los guarde enuna base de datos.
me he atorado en el combo uno! gracias!
creo q la pregunta, de forma mas sencila seria como recojo los valores de los 2 select para pasarlos a un archivo php y guardarlos en una bd?
Pero normal… sabes como guardar en base de datos no?
Solo metes tus combos dentro de un formulario, algo asi…
<form action=”pagina_donde_guardas.php” method=”get”>
<select name=”combo1″></select>
<select name=”combo2″></select>
<input type=”submit” value=”Enviar” />
</form>
Bueno no estoy poniendo todas las etiquetas ni como sale en el video, pero es al toque, solo ponlo en un formulario y el botón para enviar el formulario
ya lo intente asi y no puedo mover los datos, esta es la url en la que estoy probando, http://edulap.com/plataforma/select/index.php tu script, mm ayudame!!! yo pago por paypal pero ehcame una ayudadtita!! please!
Tienes un “error” y hay otra cosa que te recomiendo…
Recomendación:
Tu javascript y cuando llamas al jquery ponlo antes del body, no lo pongas dentro de la etiqueta FORM.
“ERROR”
Tu botón es de tipo “button”, ponlo tipo “submit”
Otra cosita, solo si puedes, ya que te estoy ayudando, si puedes por ahí pon mi link en tu página
jajaj, es verdad que tonto soy, no habia notado eso del submitt, y disculpa que siga molestando pero los get como los recojo??? no he pdodio atrapar los get del combouno y dos en al archivo de combo.php
ya pude gracias
tu ayuda ha asido invaluable!!!
Pero sus valores los recoges normal… has la prueba
<?php
$_combo1 = $_GET["combo1"];
$_combo2 = $_GET["combo2"];
echo $_combo1." – ".$_combo2;
?>
claro con mucho gusto pondre tulink en mi pagina!!!! dalo por hecho, y gracias!
Para eso estamos…
Gracias por tu aporte también.
Saludos!
hey amigo buen tutorial, queria preguntarte como se podria hacer para cargar lo datos de mysql, soy nuevo en esto… gracias…
amigo un saludo, de verdad es muy bueno este tipo de ayudas. lo felicito. sin embargo tengo una duda, si yo quisiera enviar un conjunto de informacion del combo 1 al combo 2 se entiendo perfectamente … cuando la relacion es 1:m es decir para cada opcion del m hay un 1 solo elemento que le corresponde.
sin embargo yo quisiera por ejemplo que luego de la 1 respuesta no solamente se abriera informacion para el segundo combo … sino que tambien viniera data adicional por ejemplo.
tengo una tabla con paises … ciudades y costumbres.
cuando yo selecciono el pais … me van a salir las ciudades … pero cuando selecciono la ciudad … me van a salir varias caracarteristicas … como por ejemplo .. moneda … poblacion … idioma … y algunas anotaciones que se deben colocar en un input.
en este caso si selecciono un pais me va salir la ciudad … ahi no hay problema … el problema esta cuando al selecciono la ciudad como obtendria los datos de esta ciudad ….
yo tengo el query que me retorna todos los datos de la ciudad sin embargo no doy como empaquetar estos datos para colocarlos en la tabla correspondiente a esta ciudad.
gracias, si me pueden ayudar se los agradesco.
Pero claro, es la misma lógica…
Para que se te sea más fácil, crea otra función en el JS y le pones un “onchange” al segundo como, que llame a esa función. Y así puedes hacer infinitos combos. Claro, si lo quieres optimizar mejor, puedes hacer más dinámico el combo que he hecho para que mande otros parámetros para saber a qué PHP se debe llamar y en el onchange de cada combo mandas ese parámetro. Porque si ves, cuando se llama a la función, se dice qué combo se va a alimentar. Me entiendes?
Gracias giancarlo.
te entiendo lo que me dices sin embargo, el reto que tengo es que no estoy pasadon data de un combo a otro combo …. sino de un combo a muchas otras opciones por ejemplo
si tengo
en combo1.
en el combo2.
al seleccionar caracas. no voy contra otro combo sino voy a llenar una serie de campos que estan dentro de una tabla .
Moneda: bolivar
poblacion: xxx
Clima:xxx
al seleccionar el combo2 tengo que generar un java script que me tome el json y luego me deje por cada atributo del json mostrarlos tal cual yo los necesite mostrar en la tabla.
bueno hermano entiendo que de repente mis escasos conocimientos no me dejen ver mas alla de lo sencillo que pueda ser la solucion pero de verdad necesito resolverlo
Pero no hay problema. Porque cuando devuelves el json del PHP al Javascript, te viene como un objeto… Por ejemplo en tu PHP
$comidas[] = array(“id” => 1, “vallor” => “ceviche”);
$comidas[] = array(“id” => 2, “vallor” => “lomo saltado”);
$arreglo = array(“culturas” => $culturas, “comidas” => $comidas);
En el JS te lo devuelve en la variable “json”, en nuestro caso, y le puedes hacer una alert:
alert(json.comidas[0].id);
Al final te llega un objeto y te paseas por ahí.
Buen dia Giancarlo.
entiendo tu respuesta,
“cuando devuelves el json del PHP al Javascript, te viene como un objeto”
Sin embargo cuando dices:
“$comidas[] = array(“id” => 1, “vallor” => “ceviche”);”
el “id” =>1 … necesito que el 1 sea la variable del json. osea dinamico.
y si coloco
“$comidas[] = array(“id” => json, “vallor” => json);”
no funciona …
Entonces como haria para sacar los valores de forma dinamica del json
Gracias.
Tendrías que poner el valor del ID como arreglo, no como json, luego todo el arreglo ($comidas) lo conviertes en json
$comidas[] = array(“id” => array(), “vallor” => array());”
Gracias muy valiosa tu colaboracion…
tengo varios trabajos por realizar, si estas interesado en freelance rodriguez76@gmail.com
Giancarlos,
antes de todo te felicito por el tutoral, en verdad me sirvió de mucho, se agradece, no quisiera molestarte pero esque soy bastante novato en esto del ajax, y de la programación en general, mira utilice tu ejemplo para crear listas dinámicas conectándome a una base de datos, no tengo problemas para llenar los combos, pero lo que no he podido hacer es tomar el value, que debería ser el id_equipo (en mi caso) para mandarlo como parámetro a otra funcion php que me listara todos los datos de esta selección, me da = mandar este dato con un submit o a través de un onchange del select, pero lo que no se es como tomar ese parámetro para mandarlo como valor para la consulta.
Se que debe ser muy básico pero la verdad no se me ocurre y googleando no lo soluciono, he probado bastantes formas y no puedo solucionarlo y la verdad es que me ha agotado demasiado tiempo, por eso es que decidí molestarte.
bueno de antemano te agradezco un monton y te pido disculpas por la molestia.
sldos.
Coger el value de un combo es sencillo. Con Javascript puedes hacer esto:
(Ah, primero tu combo debería tener un id)
var combo = document.getElementById(“combo2″);
alert(combo.options[combo.selectedIndex].value);
Hace mucho que no utilizo esto, pero recuerdo que es así. Ahora uso jQuery. Con jQuery es más sencillo en realidad.
var combo = $(“select#combo2″);
alert(combo.val());
Espero te sirva y te haya entendido.
No te olvides y no se olviden de apoyarme en darle clic a la publicidad (AdSense).
GRACIAS
Hola, disculpa la molestia, ya probe haciendo un combo de estados y ciudades tomando como base tu ejemplo… solo se me ocurrio una ultima cosa… ¿es posible hacer que al ejecutar el select, este tenga un valor seleccionado en el primerCombo y un valor en el segundoCombo? como por ejemplo un combo estado y otro de ciudad donde se tenga elegido un estado y una ciudad por default…
SALUDOS y gracias de antemano…
Si claro, solo pon la información. Por qué no lo intentas?
hola e jalado un campo de mi tabla en un combo como por decio nombre_cliente si selecciono un cliente quiero que me muestre sus datos en unas cajas de texto ayuda por soy nuevo en esto
Muchas gracias por la respuesta, lo de la seleccion de un estado y ciudad que comentaba es como por ejemplo, que un usuario en un formulario elije un estado y una ciudad y luego lo guarda, si el usuario regresa y quiere modificar lo que elijio, ¿como podria mostrar los datos anteriores?, he logrado mantener seleccionado el estado pero como mantener el valor de ciudad, si este select es llenado por el script y funcion LlenarCombo ¿como lo selecciono desde esta funcion?…
Saludos y gracias de antemano
tengo una tabla que muestra muchos registros , en cada fila existe un select (combo) con varios valores tambien,todo esto dentro de un formulario, en cada fila existe un chekbok para seleccionar las filas que nesecito marcar con el valor del select ,? como hago para capturar el valor del select de cada fila seleccionada ..y no tomar en cuenta las que no he seleccionado ?.. espero me haya dejado entender…
Ok..todo depinga …. pero ese código si lo llamas desde otra página y lo cargas en un usando Ajax no se ejecutan las funciones del evento onload del primer combo…No he visto el primer ejemplo en la Web sobre el caso que planteo.
perdón..del evento onchange del primer combo
hola giancarlo ante todo un cordial saludo y falicidades por este magnifico tutorial, es bueno contar con gente asi en internet.
bien solo tengo un detalle en mi site, no se si se te salto a ti o el problema es mio aca, pero la funcion que limpia no me funciona, inclusive ejecutando tu ejemplo. osea selecciono la Opcion1 y en el combo 2 se listan los 3 items, pero si vuelvo y selecciono Opcion 2 en el combo 2 estan los 3 items de la primera opcion, más lo de la segunda opcion, me podrias indicar como hacer para limpiar el combo 2.
Gracias de antemano
Hola,
No quise pasar de alto y no darte las gracias. Excelente tutorial, me ayudó a hacer una funcionalidad que llevaba muchas horas batallandole. Mil gracias por compartir ese conocimiento.
10 puntos para este tutorial
Muchas gracias, excelente tutorial y excelente manejo de JSON.
Saludos.
Bueno mi duda es de como rellenar los cuadros de texto desde una consulta de mysql, en si lo que quiero es seleccionar el cliente en dado caso que este registrado y si no que lo inserte, lo que pasa es que desde un formulario se tiene que insertar datos del cliente, conceptos, etc para poder hacerle la factura, entonces lo que se necesita es que valide los clientes, seleccionarlos si esta registrado de lo contrario que se inserte espero su respuesta a este correo por favor, pab_eduar1@hotmail.com
Como seria desde una bd con 4 selects dependientes…
Hola amigos necesito llenar varios Lista/menu q tengo en mi formulario, estos datos estas en la varias tablas de mi BD… cuando creo un Lista/menu y hago el codigo correspondiente este funciona perfecto. pero cuando trata de seguri con el siguienta lista/menu entonces deja de funcionar el anterior y funciona el q acabe de hacer.
EJE: BD=SALUD
tabla1 se llama MEdicos.(id_medicos, nombre_medico)
tabla2 se llama centros(id_Centros, nom_centros)
.
.
.
tabla10 se llama enfermedades(id_enfermedades, Nombre_enfermedad)
ya todas estan llenas con los datos que requieren.
Ahora tengo un formulario donde tengo los 10 Lista/menus o combobox como les guste… pero creo el php para el primero. include(“conexioon.php”); $r=(“select id_medico, nom_medico from medicos order by nom_medico”); $p=mysql_query($r), y luego voy donde esta el select y lo programo tambien <?php while($fila=mysql_fetch_row($p)){
echo "”.$fila["1"].”
bueno listo esto funciona perfecto pero me quedn 9 combobox o 0 listas/menus q llenar de la misma forma, pero si lo hago igual las demas dejan de funcionar. q puedo hacer hay alguna otra forma o es imposible?.-
responder a mi E-mail o mas pronto posible jairj02@hotmail.com
expongo lo siguiente.
1- guardo en una base de datos el value de un select, el value es el codigo de , por ejemplo, compañias de transporte (listado que tengo en un mantenedor de compañias de transportes), creo el registro en mi base de datos y queda bien almacenado el codigo de la cia de transporte.
2- deseo editar un formulario que relaciona una cia de transporte, pero cuando busco el codigo no me funciona decirle al select recien llenado con las compañias de transporte que quede seleccionada en la que originalmente el usuario habia almacenado.
como lo puedo hacer???.
<select width="38" name="trans_terrestre_puerto_destino" value="” id=”trans_terrestre_puerto_destino”>
mostrar_transportes(“maritimo”);
while( $lista = sqlsrv_fetch_array($datos) ){
$codigo=$lista['codigo'];
$dato=$lista['nombre'];
if($datos['trans_terrestre']==$codigo)
echo ”.$dato.”; else
echo ”.$dato.”;
}
?>
ese es el codigo pero siempre por defecto queda el primero seleccionado y no el que habia seleccionado previamente el usuario y guardo en la base.
‘
<select width="38" name="trans_terrestre_puerto_destino" value="” id=”trans_terrestre_puerto_destino”>
mostrar_transportes(“maritimo”);
while( $lista = sqlsrv_fetch_array($datos) ){
$codigo=$lista['codigo'];
$dato=$lista['nombre'];
if($datos['trans_terrestre_puerto_destino']==$codigo)
echo ”.$dato.”; else
echo ”.$dato.”;
}
?>
‘
Hola Giancarlos,
Al tratar de realizar un problema con tu ejemplo, no me daba, al final
pude analizar que si en el archivo php tiene al menos una etiqueta html, ya no opera. ¿Cuál es la explicación”).
Gracias.
Seguramente es porque no puedes poner un header de json y luego poner cualquier cosa que no lo es, ni menos mostrar texto (como poner por ejemplo una etiqueta de HTML) y luego poner un header.
Giancarlo
Lo que Ud hace es exactamente lo que necesito y he buscado hace varias semanas sin resultado.
He bajado el codigo y puesto a funcionar tal cual como lo tienen disponible, pero no funciona. Incluso me fijado lo que hace en el cideo y tratado de hacerlo funcionar pero tampoco funciona.
Hay algun restriccion o algun truco que no lo dice en su tutorial para poder hacer funcionar.
Le agradezco mucho su gentileza en contestarme
Genial!!!!
Facil, Claro y Funciona!!!!!!
Me quito el sombrero amigo, me has salvado
Giancarlos,
Gracias por la solucion, me funciono bien, pero tengo una duda, estoy usando smarty para mostrar el contenido de mi pagina, y no funciona, mi duda es q si se puede aplicar esto usando smarty?, y si me das una ayudita con este tema.
Gracias de antemano.
Pero es igual. El smarty te funciona para mostrar el HTML (por decirlo así).
Puedes usar Smarty, solo que en ese caso no es necesario mostrar una plantilla, solo lo que he puesto… usa solo json
Excelente post, me sirvió mucho.
Gracias
Enrique Galindo Cárdenas.
Que exelente aporte.
muy bueno de antemano muchas gracias.
El video – y el codifo fuente.
hola como estas?? gracias x el tuto! lo intente probar pero no me sale las opciones!:( .. quisiera q me ayudes con el sql …. tengo 2 combobox uno q escoge el pais y el otro la ciudad como haria eso?? ayudame xfavoar con una base de datos!
gracias
mi mail es:gesenmex@hotmail.com
Hola, mi pregunta creo que es bastante simple, pero no consigo hacerlo funcionar, yo tengo un select que estoy cargando dinamicamente desde php y lo que quiero es que por defecto me seleccione un elemento, entonces estoy lo hago desde el php de la siguiente manera:
recorro mi consulta a la base de datos y voy cargando un array con las options:
if($row[id]==$row1[id]){
$rows.=”.utf8_encode($row1[nombre]).”;
} else {
$rows.=”.utf8_encode($row1[nombre]).”;
}
En el momento que el identificador coincide con el que quiero seleccionar, entra enel if y crea esa option con el atributo selected.
Bien pues, esto que hago no tiene ningun efecto, alguna idea?
Saludos.
buenas noches estoy haciendo un sistema y en el mismo necesito hacer una función casi igual pero necesito llenar una campo de texto con la información de un combo u option….. que debo hacer cualquier información se los agradecería
Es igual. Solo que por ejemplo tu arreglo sería algo así
$_arreglo = array(“texto” => $_variableconeltexto);
y le das el
echo json_encode($_arreglo);
Para recuperarlo, el jquery obtendrá un objeto y una de sus propiedades será “texto”
Osea la varible (“json”) que llega por la función tendrá el texto y lo recuperas, por ejemplo
alert(json.texto);
hola maestro, necesito tu ejemplo pero en XML no nos servira el JSON, te estaremos agradecidos si podes facilitarnos. abrazos
te dejo mi correo xtian1705@gmail.com
Hola Xtian. Lo que podrías hacer es convertir el XML a JSON desde el PHP. Hay muchas clases rondando por internet.
Claro, también puedes mandar el XML al javascript y con JQUERY leerlo más fácil, como al final son etiquetas, no tendrías problemas.
He encontrado un ejemplo para que puedas leer XML con JQUERY
http://think2loud.com/224-reading-xml-with-jquery/
Y aquí hay una forma para convertir XML a JSON desde PHP
http://www.sitepoint.com/php-xml-to-json-proxy/
No los he puesto a prueba, pero me imagino que te servirán
SUERTE!
que tal giancarlo, en primer lugar muchas gracias por el tutorial me ha servido ya que soy nuevo trabajando con php y todo este rollo.
tengo un problemita y con los arreglos, no se si me falte algo para que se ejecute bien. cuando quiero provar el ajax.php me sale lo siguiente:
1, “data” => “Valor 1.1″); $_arreglo[] = array(“id” => 2, “data” => “Valor 1.2″); break; } echo json_encode($_arreglo); ?>
el codigo que tengo es este:
1, “data” => “Valor 1.1″);
$_arreglo[] = array(“id” => 2, “data” => “Valor 1.2″);
break;
}
echo json_encode($_arreglo);
?>
espero me puedas ayudar con mi duda. muchas gracias saludos
tambien en tu ejemplo que tienes descargable me marca lo mismo, es que acaso me falta algun plugin para poderlo ver bien?
Muchas Gracias
Moises. El ejemplo me funciona bien. Lo único que se me ocurre es que no tengas la función “json_encode” instalada. También puedes buscar ejemplos para convertir arreglos a “json”
ya resolvi el problema, muchas gracias, lo que no tenia era funcionando el servidor jeje pequeño error de usuario, todo jala muy bien, pero me resulto otro pequeño problema, los acentos no se ven, en el localhost me corta las palabras donde inicia el acento y una vez ya arriba la pagina, la palabra me aparece nula que podria hacer?
Oh! Los acentos… Usa esto:
$_arreglo[] = array(“id” => 1, “texto” => utf8_encode(“Árbol”));
Osea usa “utf8_encode” para los textos
Muchas gracias por el tutorial me ayudo demasiado a diferencia de otros donde tienes que hacer mucho mas show
muchas gracias
Hola!
Excelente tutorial, pero no puedo acceder a más sobre JSon y no puedo descargar el ejemplo, me ayudas porfa?
saludos
Ya volví a poner el ejemplo al aire