Ver Mensaje Individual
  #15 (permalink)  
Antiguo 16/10/2010, 18:48
LOD_Fredy
 
Fecha de Ingreso: abril-2009
Mensajes: 341
Antigüedad: 15 años, 7 meses
Puntos: 3
Respuesta: Llenar un select a partir de la opcion elegida en otro select

Utilizando jquery logre lo que queria (aunque por ahora es sobre mi base de datos y no la del servidor piloto), solo que quiciera me explicaran la parte del codigo jquery ya que algunas cosas no las entiendo y pues tengo que documentar el codigo como parte del manual tecnico que tengo que entregar.

Primero las tablas que cree:

Código SQL:
Ver original
  1. CREATE TABLE pais
  2. (
  3. idpais INT NOT NULL PRIMARY KEY,
  4. pais VARCHAR(50) DEFAULT NULL
  5. )
  6. CREATE TABLE estado
  7. (
  8. idestado INT PRIMARY KEY,
  9. estado VARCHAR(50) DEFAULT NULL,
  10. pais INT NOT NULL
  11. )


Ahora el codigo jquery que llena el combo edicion (publicacion corresponde a pais y edicion coresponde a estado)
Código Javascript:
Ver original
  1. <script>
  2.  
  3.       $(document).ready(function(){
  4.  
  5.           $("select").change(function(){
  6.  
  7.               // Vector para saber cuál es el siguiente combo a llenar
  8.  
  9.               var combos = new Array();
  10.  
  11.               combos['publicacion'] = "edicion";
  12.  
  13.               //combos['estado'] = "ciudad";
  14.  
  15.               // Tomo el nombre del combo al que se le a dado el clic por ejemplo: país
  16.  
  17.               posicion = $(this).attr("name");
  18.  
  19.               // Tomo el valor de la opción seleccionada
  20.  
  21.               valor = $(this).val()      
  22.  
  23.               // Evaluó  que si es país y el valor es 0, vacié los combos de estado y ciudad
  24.  
  25.               if(posicion == 'publicacion' && valor==0){
  26.  
  27.                   $("#edicion").html('    <option value="0" selected="selected">----------------</option>')
  28.  
  29.                   //$("#ciudad").html('    <option value="0" selected="selected">----------------</option>')
  30.  
  31.               }else{
  32.  
  33.               /* En caso contrario agregado el letreo de cargando a el combo siguiente
  34.  
  35.               Ejemplo: Si seleccione país voy a tener que el siguiente según mi vector combos es: estado  por qué  combos [país] = estado
  36.  
  37.                   */
  38.  
  39.                   $("#"+combos[posicion]).html('<option selected="selected" value="0">Cargando...</option>')
  40.  
  41.                   /* Verificamos si el valor seleccionado es diferente de 0 y si el combo es diferente de ciudad, esto porque no tendría caso hacer la consulta a ciudad porque no existe un combo dependiente de este */
  42.  
  43.                   if(valor!="0" || posicion !='edicion'){
  44.  
  45.                   // Llamamos a pagina de combos.php donde ejecuto las consultas para llenar los combos
  46.  
  47.                       $.post("combo.php",{
  48.  
  49.                                           combo:$(this).attr("name"), // Nombre del combo
  50.  
  51.                                           id:$(this).val() // Valor seleccionado
  52.  
  53.                                           },function(data){
  54.  
  55.                                                           $("#"+combos[posicion]).html(data);    //Tomo el resultado de pagina e inserto los datos en el combo indicado                                                                              
  56.  
  57.                                                           })                                              
  58.  
  59.                   }
  60.  
  61.               }
  62.  
  63.           })      
  64.  
  65.       })
  66.  
  67.       </script>

Ahora el codigo de combo.php

Código PHP:
Ver original
  1. <?php
  2.     include('modelo/conexion.php');
  3.     $idcombo = $_POST["id"];
  4.     $obj= new Original();
  5.     $Q=$obj->RecEd($idcombo);  
  6.     while ( $row = oci_fetch_array($Q, OCI_RETURN_NULLS) )
  7.     {          
  8.         echo '<option value="'.$row[0].'">'.htmlentities($row[1]).'</option>';     
  9.     }
  10.     oci_free_statement($Q);  
  11. ?>

Espero con estos codigos les sea suficiente para explicarme y pues disculpen que les pida esto pero no es suficiente que medio entienda el codigo pues, como dije, lo voy a documentar ya que alguien mas podria llegar a tener que modificarlo en el futuro, ademas de que me serviria a mi para igual e irme metiendo de lleno al jquery y utilizarlo en vez de el javascript clasico.

Ahora, una ultima pregunta, con este poco codigo jquery podria llegar a hacer otras cosas puesto que siento que lo que hace jquery es manejar de otra manera lo mismo que maneja javascript (por lo que la programacion basica es la misma como el if utilizado en este codigo) y solo falta entender la sintaxis de como accesar a los elementos de una pagina (en vez de usar el getelementbyid o document.elemento.elemento.....)

Bueno gracias y espero su respuesta que terminaria (eso espero) con este problema.