Listas desplegables en HTML

Tema en 'Programación y Diseño Web' iniciado por kreikol, 24 Mar 2007.

  1. kreikol

    kreikol Nuevo usuario

    Buenas gente!! qué tla va todo??
    A ver quien es el voluntario que me ayuda para saber como hacer dos listas desplegables en HTML y que al seleccionar un item de la primera en la segunda lista aparezcan los items relacionados con el item seleccionado en le pirmera. Osease... más o menos como si en la primera seleccionaras un país y en la segunda te cargara las ciudades de ese país, no es el caso pero es para que me entendáis.
    Lógicamente los items los tengo en una base de datos.

    Un saludo, thanks! :adios:
  2. elQuique

    elQuique Usuario activo

    Pues, con HTML unicamente no se puede ya que HTML es un lenguaje estatico.

    Podrias usar PHP que es dinamic, pero bueno tampoco podras hacerlo con PHP ya que se ejecuta en el servidor y tu requieres de una accion en el navegador para cargar la segunda lista.

    Y bien, si hablamos de lenguajes para interactuar con el usuario eso es JavaScript, pero claro bueno no funciona tampoco ya que JavaScript no puede ir a tu base de datos.

    Entonces ??

    En ese caso lo mejor es usar la licuadora :p y mezclar estos lenguajes, y asi logras algo como esto:

    <a href="http://www.tallerwebmaster.com/CursoWebBienesRaices/listas.php" target="_blank">http://www.tallerwebmaster.com/CursoWebBie...ices/listas.php</a>

    Otra forma es usar AJAX o acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos, donde XML es un acrónimo de eXtensible Markup Language)
    <a href="http://es.wikipedia.org/wiki/AJAX" target="_blank">http://es.wikipedia.org/wiki/AJAX</a>

    que no es un lenguaje es mas bien la nueva forma de llamarle a la mexcla
    de esos lenguajes como XML, JavaScript, HTML, etc pero lo haremos sin el nombrete raro.

    La base de datos que use esta explicada en mi curso de web de bienes raíces:
    <a href="http://www.tallerwebmaster.com/Tutorial-Web-de-Bienes-Raices-o-Inmobiliarias-Base-de-Datos-c-68.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-We...Datos-c-68.html</a>

    Y ahora paso a explicar la solución a lo que preguntas :)

    Como elementos HTML importantes vamos a tener 3 elementos importantes, estos son:

    <b>frmDatos</b> que es el formulario que contiene las listas

    <b>selCiudades</b> que es la lista donde seleccionas las ciudades

    <b>selPropiedades</b> que es la lista donde seleccionas las propiedades


    Continuación del tutorial que hice por acá :)

    <a href="http://www.tallerwebmaster.com/Tutorial-Listas-dinamicas-enlazadas-c-77.html" target="_blank">http://www.tallerwebmaster.com/Tutorial-Li...zadas-c-77.html</a>

    Adjuntos:

    • listas.zip
      Tamaño de archivo:
      975 bytes
      Visitas:
      199
  3. Pedri

    Pedri Nuevo usuario

    Te me adelantaste Quique :laughing1:
    Tengo una pregunta: ¿Si esto de los códigos es relativamente nuevo, por qué no lo hicieron más fácil? jajaja
  4. kreikol

    kreikol Nuevo usuario

    Muchas gracias Quique, pero tenog un problemilla, se me queda colgado al cargar lo q en tu ejemplo serían las propiedades.
    No se porq selecciono una y se queda ahi, da error en pagina y adios.

    No consigo encontrar el fallo.

    :S
  5. kreikol

    kreikol Nuevo usuario

    weno dejo aki "mi codigo" a ver si alguien ve el fallo porq yo ya no veo mas q letras ....bfffffff

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><?php
    $link=mysql_connect("localhost","root");
    mysql_select_db("bd_mir_pro",$link);
    ?>
    <html>
    <head>
    <title>Bienvenido, selecciona lo que quieres hacer</title>

    <script language="javascript">
    &nbsp;&nbsp;&nbsp;&nbsp;function ListaCiclos(xPro) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms.frmDatos.selCiclos.disabled = true;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms.frmDatos.selModulos.length = 0;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CargarModulos(xPro);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms.frmDatos.selCiclos.disabled = false;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;function CargarModulos(ciclo) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var o
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms.frmDatos.selModulos.disabled=true;
    <?
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$modulos=mysql_query("select * from modulos where codci='".ciclo."'",$link);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while ($reg_mod = mysql_fetch_row($modulos)) {
    ?>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ciclo == <?php echo $reg_mod[1]; ?>) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o = document.createElement("OPTION");
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o.text = '<?php echo $reg_mod[2]; ?>';
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;o.value = <?php echo $reg_mod[0]; ?>;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms.frmDatos.selModulos.options.add (o);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;
    <?
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mysql_free_result($modulos);
    ?>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.forms.frmDatos.selModulos.disabled=false;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    </script>

    </head>
    <body>
    <form id="frmDatos" name="frmDatos" method="post" action="">
    &nbsp;&nbsp;&nbsp;&nbsp;Ciclos:
    &nbsp;&nbsp;&nbsp;&nbsp;<select name="selCiclos" size="6" witdh="30" id="selCiclos" onChange="ListaCiclos(document.forms.frmDatos.selCiclos[selectedIndex].value);">
    <?php
    $ciclos = mysql_query("SELECT * FROM ciclos",$link);
    while ($reg_ciclo = mysql_fetch_array($ciclos)) {
    ?>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<option value="<?php echo $reg_ciclo[0]; ?>"><?php echo $reg_ciclo[2]; ?></option>
    <?php
    }
    mysql_free_result($ciclos);
    mysql_close($link);
    ?>
    &nbsp;&nbsp;&nbsp;&nbsp;</select>
    &nbsp;&nbsp;&nbsp;&nbsp;Modulos:
    &nbsp;&nbsp;&nbsp;&nbsp;<select name="selModulos" size="2" id="selModulos">
    &nbsp;&nbsp;&nbsp;&nbsp;</select>
    </form>

    </body>
    </html><!--c2--></div><!--ec2-->

    Os dejo la base de datos por si quereis probar. byezz

    sigo con mis dudas, ya no se si soy medio subnormal o es por el sueño q tengo pero...
    una vez q me funcione como tiene que funcionar, oasease BIEN, tengo q poner un boton que me lleve a otra pagina pasandole los dos parametros de las listas para hacer lo que quiero hacer después.

    Muchas gracias de antemano, dew
  6. elQuique

    elQuique Usuario activo

    Pero mi codigo te funciona ?? o sea si miras el link que pase te va ??

    Si no es asi avisame y si el mio te funciona y el tuyo no ... pues bueno pega tu codigo y nos fijamos el error.
  7. kreikol

    kreikol Nuevo usuario

    Cogi le tuyo le cambie unicamente el nombre de la bd, las tablas correspondientes y los campos y no me funciona
  8. mecq

    mecq Nuevo usuario

    Hola gracias por recibirme, necesito ayuda con el siguiente código de las listas enlazadas:

    Tablas:

    CREATE TABLE `mcartucho` (
    `id_mcartucho` int(11) NOT NULL auto_increment,
    `nombre_mcartucho` varchar(15) NOT NULL default '',
    PRIMARY KEY (`id_mcartucho`)
    ) TYPE=MyISAM AUTO_INCREMENT=4 ;

    -- Volcar la base de datos para la tabla `mcartucho`


    INSERT INTO `mcartucho` VALUES (1, 'Epson');
    INSERT INTO `mcartucho` VALUES (2, 'Canon');
    INSERT INTO `mcartucho` VALUES (3, 'HP');


    CREATE TABLE `mimpresora` (
    `id_mimpresora` int(11) NOT NULL auto_increment,
    `nombre_mimpresora` varchar(20) NOT NULL default '',
    `id_cartucho` int(11) NOT NULL default '0',
    PRIMARY KEY (`id_mimpresora`)
    ) TYPE=MyISAM AUTO_INCREMENT=7 ;

    --
    -- Volcar la base de datos para la tabla `mimpresora`
    --

    INSERT INTO `mimpresora` VALUES (1, 'Stylus C67', 1);
    INSERT INTO `mimpresora` VALUES (2, 'Stylus C87', 1);
    INSERT INTO `mimpresora` VALUES (3, 'Stylus CX 3700', 1);
    INSERT INTO `mimpresora` VALUES (4, 'Stylus CX 4100', 1);
    INSERT INTO `mimpresora` VALUES (5, 'hp_1', 2);
    INSERT INTO `mimpresora` VALUES (6, 'hp_2', 2);


    CREATE TABLE `tinta` (
    `id_tinta` int(11) NOT NULL auto_increment,
    `nombre_tinta` varchar(20) NOT NULL default '',
    `descripcion` varchar(50) NOT NULL default '',
    `precio` int(5) NOT NULL default '0',
    `imagen` mediumblob NOT NULL,
    `id_impresora` int(11) NOT NULL default '0',
    PRIMARY KEY (`id_tinta`)
    ) TYPE=MyISAM AUTO_INCREMENT=28 ;

    --
    -- Volcar la base de datos para la tabla `tinta`
    --

    INSERT INTO `tinta` VALUES (26, 'T063120', 'Tinta Durabrite Ultra', 48, '' , 1);
    INSERT INTO `tinta` VALUES (27, 'T063220', 'Tinta Durabrite Ultra', 48, '' , 1);


    CODIGO PARA LA PAGINA

    <?php
    $conexion = mysql_connect('SERVER', 'USER', 'PASS');
    mysql_select_db('tienda');
    ?>
    <!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=iso-8859-1" />
    <title>Configurador de tinta</title>
    <script language="javascript">
    function ComponerLista(xPro)
    {
    document.forms.frmDatos.selMarca.disabled = true;
    document.forms.frmDatos.selImpresora.length = 0;
    CargarImpresora(xPro);
    document.forms.frmDatos.selMarca.disabled = false;
    }
    function CargarImpresora(xCiu) {
    var o
    document.forms.frmDatos.selImpresora.disabled=true;
    <?php
    $tablaImpresora = mysql_query('SELECT * FROM mimpresora ORDER BY id_cartucho ASC');
    while ($registroImpresora = mysql_fetch_array($tablaImpresora)) {
    ?>
    if (xCiu == <?php echo $registroImpresora["id_cartucho"]; ?>) {
    o = document.createElement("OPTION");
    o.text = '<?php echo $registroImpresora["nombre_mimpresora"]; ?>';
    o.value = <?php echo $registroImpresora["id_mimpresora"]; ?>;
    document.forms.frmDatos.selImpresora.options.add (o);
    }
    <?php
    }
    mysql_free_result($tablaImpresora);
    ?>
    document.forms.frmDatos.selImpresora.disabled=false;
    }
    </script>
    </head>
    <body>
    <form id="frmDatos" name="frmDatos" method="post" action="">
    <label>Marca:
    <select name="selMarca" size="1" id="selMarca" onchange="ComponerLista(document.forms.frmDatos.selMarca[selectedIndex].value);">
    <?php
    $tablaMarca = mysql_query('SELECT * FROM mcartucho ORDER BY nombre_mcartucho ASC');
    while ($registroMarca = mysql_fetch_array($tablaMarca)) {
    ?>
    <option value="<?php echo $registroMarca['id_mcartucho']; ?>"><?php echo $registroMarca['nombre_mcartucho']; ?></option>
    <?php
    }
    mysql_free_result($tablaMarca);
    ?>
    </select>
    </label>
    <label>Impresora:
    <select name="selImpresora" size="1" id="selImpresora">
    </select>
    </label>
    </form>
    </body>
    </html>
    <?php
    mysql_close($conexion);
    ?>

    todo esto funciona bien, Ahora lo que yo quiero hacer además y que no me sale :( es escoger un elemento de la lista/menu "impresora" y que se imprima en una tabla html los datos correspondientes sólo a ese tipo de impresora q escogí, que están en la TABLA tinta que como ven está enlazada manualmente por el id, con la TABLA mimpresora

    Ojalá me puedan ayudar, muchas gracias

    María
    [email protected]
  9. elQuique

    elQuique Usuario activo

    mecq, agrega a tu formulario un campo textarea o sea un text de múltiples lineas, luego en la lista de impresora agregas en el onchange otra función así como la de elegir en Marca, luego te escribes la función que tome el código y busque esa impresora con PHP y luego con document imprimes el valor que traigas de la base de datos :)

    La otra forma de hacerlo es con AJAX puro, pero eso es otro rollo :)
  10. aj_maverick

    aj_maverick Nuevo usuario

    En mi trabajo estoy haciendo uso de dichas listas desplegables. En mi caso son 3 listas. El tema trata sobre incidencias informaticas. Muchos require once están porque en otros módulos php he incluido las conexiones a mi base de datos, etc etc etc.
    Si no entienden algo...ruego que me lo hagan saber y yo les ayudaré.

    En fin os dejo mi código:

    <b>[i<? require_once('../chequeopw.php') ?>
    <? require_once('../Connections/web.php'); ?>
    <? require_once('../modulos/GetSQLValueString.php');?>
    <? require_once('../modulos/cabecera.php'); ?>
    <?php
    mysql_select_db($database_web, $web);

    $firstQry = mysql_query("select * from incidencia") or die(mysql_error());
    $secondQry = mysql_query("select * from tipoincidencia where id_incidencia = '".$_POST["first"]."'") or die(mysql_error());
    $thirdQry = mysql_query("select * from subtipoincidencia where id_tipoincidencia = '".$_POST["second"]."'") or die(mysql_error());
    ?>
    <form name="check" method="post">
    <!-- A partir de aquí la primera lista desplegable -->
    <p align="center">&nbsp;</p>
    <p align="center"><span style="font-weight: bold"><font color="#0000FF">Tengo problemas del tipo: </font></span></p>
    <div align="center">
    <select name="first" onchange="this.form.submit()">
    <option value="defecto">-- Seleccionar Tipo de Incidencia -- </option>
    <?php while($res = mysql_fetch_array($firstQry)){?>
    </p>
    <option value="<?php echo $res["id"]?>" <? if ($_POST["first"]==$res["id"]) { echo " selected "; }?>><?php echo $res["nombre"]?></option>
    <?php }unset($firstQry,$res);?>
    </select>
    <!-- Aquí termina la primera lista desplegable -->

    <!-- A partir de aquí la segunda lista desplegable -->
    <?php if(isset($_POST["first"])){?>
    </p>
    </div>
    <p align="center"><span style="font-weight: bold"><font color="#0000FF">Me falla el/la: </font></span></p>
    <div align="center">
    <p>
    <select name="second" onchange="this.form.submit()">
    <option value="defecto">-- Seleccionar qué falla -- </option>
    <?php while($row = mysql_fetch_array($secondQry)){?>
    <option value="<?php echo $row["id"]?>"<? if ($_POST["second"]==$row["id"]) { echo " selected "; }?>><?php echo $row["nombre"]?></option>
    <?php }
    }unset($secondQry,$row);?>
    </select>
    <!-- A partir de aquí la tercera lista desplegable -->
    <?php if(isset($_POST["second"])){?>
    </p>
    </div>
    <p align="center"><span style="font-weight: bold"><font color="#0000FF">Descripción: </font></span></p>
    <div align="center">
    <p>
    <select name="third">
    <option value="defecto">-- Seleccionar exactamente qué ocurre -- </option>
    <?php while($row2 = mysql_fetch_array($thirdQry)){?>
    <option value="<?php echo $row2["nombre"]?>"><?php echo $row2["nombre"]?></option>
    <?php }
    }unset($thirdQry,$row2);?>
    </select>
    </p>
    </p>
    <p>&nbsp; </p>
    </div>
    </form>
    <?
    require_once('../modulos/pie.php') ?>[/i]</b>


    Espero haberles servido de ayuda
  11. elQuique

    elQuique Usuario activo

    aj_maverick, bienvenido al foro
  12. aj_maverick

    aj_maverick Nuevo usuario

    <!--quoteo(post=246417:date=Aug 31 2007, 05:13 AM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Aug 31 2007, 05:13 AM) [snapback]246417[/snapback]</div><div class='quotemain'><!--quotec-->
    aj_maverick, bienvenido al foro
    <!--QuoteEnd--></div><!--QuoteEEnd-->

    Muchas gracias elQuique. Espero poder responder y encontrar respuesta a todas las dudas que rodean al mundo del programador/a.

    Por fin es Viernes y ...... ¡Esta noche fiestorro! :drunk:
  13. Carxl

    Carxl Nuevo usuario

    Hola kreikol :)

    Dime si no has podido solucionar tu problema, y te paso el codigo de como lo hago yo... vale?? Mira lo utilizo acà en <a href="http://www.blogcarxl.com" target="_blank">mi web</a>.

    Saludos :adios:
  14. Murielita24

    Murielita24 Nuevo usuario

    <!--quoteo(post=206144:date=Mar 25 2007, 06:16 AM:name=kreikol)--><div class='quotetop'>CITA(kreikol @ Mar 25 2007, 06:16 AM) [snapback]206144[/snapback]</div><div class='quotemain'><!--quotec-->
    Cogi le tuyo le cambie unicamente el nombre de la bd, las tablas correspondientes y los campos y no me funciona
    <!--QuoteEnd--></div><!--QuoteEEnd-->



    hola ... a mi también me pasó lo mismo con el código... me pregunto como lo solucionaste???... agradeciendo de antemano tu ayuda
  15. elQuique

    elQuique Usuario activo

    Murielita24 bienvenida al foro

    La solución es muy sencilla, cuando alguien con experiencia muestra un ejemplo y con experiencia lo lee, seguramente sin probar el ejemplo pueda crear el suyo propio sin problemas.

    Pero bueno, cuando alguien sin experiencia intenta hacer el suyo propio sin probar 1 vez el ejemplo dado, seguramente tenga problemas y jamas logre ver que paso.

    En programación, el que quiere entrarle a esto, lo primero que debe saber es que si algo no funciona es porque se equivoco :), por tanto es tu código el que esta mal, o capaz el php, o el mysql, o la base, etc.

    Pero como saber que de todo esta mal ??

    Pues bueno, si haces mi ejemplo al pie de la letra y funciona es porque el PHP, MySQL, y la Base están bien :), solo queda la posibilidad de que cuando tu hagas los cambios falle y ahí sera tu código el del problema.

    Que parte del código ?

    Bueno si escribiste 200 lineas sin probar, el código mal son 200 lineas :p

    Ahora que si de un ejemplo probado mas de mil veces por diferentes personas tu solo cambiaste 2 lineas y no funciona, pues ya sabes que en esas 2 lineas esta el error ;)

    Conclusión: haz siempre el ejemplo, entiéndelo bien, y luego recién aventurate en modificarlo y no lo cambies todo solo cámbialo por parte hasta que seas capaz de encontrar tu error.

    Si aun así no funciona, puedes postear el código y todo tu ejemplo, incluyendo la base y encontraremos el error :)
  16. Murielita24

    Murielita24 Nuevo usuario

    Gracias por la bienvenida... te pido tolerancia ya que si consulto es porque no se mucho del tema...

    te pido por favor me ayudes.. tengo que hacer algo parecido a lo del tutorial.. el problema es que tengo 3 tablas. ya que tengo una relación de "n" a "n" básicamente es algo así:

    <b>especialidad </b>
    id_especialidad
    nombre

    <b> especialidad_profesional </b>
    id_especialidad_profesional
    id_especialidad
    id_profesor

    <b> profesor</b>
    id_profesor
    nombre




    entonces tengo que modificar la función <b>CargarPropiedades(xCiu)</b> para mostrar a los profesores asociados a una especialidad ... me entiendes??

    si me puedes ayudar te lo agradecería mucho :)


    saludos
  17. elQuique

    elQuique Usuario activo

    Mi tolerancia y forma de ayudar se traduce en decirte la verdad y como creo deberías ir paso a paso para solucionar, créeme que aparte de enseñar me gusta ver como aprenden y un método para que lleguen y como meta personal tengo lo de aprender algo cada día :p y así funciona.

    Sobre una respuesta mas concreta esta noche miro el código y te doy alguna idea ;)
  18. Murielita24

    Murielita24 Nuevo usuario

    :vale:

    gracias :arriba:
  19. 1944

    1944 Nuevo usuario

    Hola a todos! Soy nuevo en el foro y quiero agradecerles por publicar este script que hacia mucho tiempo buscaba. Mi pasatiempo es la programacion pero por el momento solo programo en PHP y HTML, asi que de javascript no entiendo nada. Lo adapte para que trabaje con dos tablas, una de las provincias y otra de las ciudades de Argentina, o sea que cuando elijo una provincia me aparecen todas las ciudades de esta, pero el problema es me carga hasta 1400 ciudades aprox cuanto tengo cerca de 2000, por lo tanto en las ultimas 4 provincias no me carga ninguna ciudad.
    ¿Que error puedo estar cometiendo?
    Desde ya les agradezsco.
    Saludos
  20. elQuique

    elQuique Usuario activo

    El error que estas cometiendo es no conocer de programación :)

    Si tienes 2 mil una lista no es apropiada.






      
      
      
      
Sitios amigos: GuiaHosting · Unidominios · Interalta · Forocreativo