Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Selects dependientes

Estas en el tema de Selects dependientes en el foro de Frameworks JS en Foros del Web. Hola, estoy creando un formulario con 3 select: Provincia. Subzona. Localidad. Al cambiar provincia hago la peticion de subzonas y localidades de la provincia. Al ...
  #1 (permalink)  
Antiguo 13/10/2010, 05:18
Avatar de Sonairo  
Fecha de Ingreso: octubre-2010
Mensajes: 2
Antigüedad: 13 años, 6 meses
Puntos: 0
Pregunta Selects dependientes

Hola,

estoy creando un formulario con 3 select:

Provincia.
Subzona.
Localidad.

Al cambiar provincia hago la peticion de subzonas y localidades de la provincia.
Al cambiar subzona hago peticion de localidades de esa subzona.

La cuestion es que al cambiar provincia todo va bien, pero cuando cambio la subzona (que proviene como respuesta al cambiar la provincia) parece que no puedo pillar el id al venir de una respuesta ajax y por lo tanto no puedo hacer una nueva petición para recibir las nuevas localidades.

Este es el codigo:

El js:
Código:
  
<script>
$(document).ready(function() {

        $("#loading").ajaxStart(function(){
                $(this).show();
                $('#resultado').hide();
        });

        $('#select_provincias').change(function() {
                $.ajax({
                  type:"POST",
                  url:"<?php echo base_url();?>"+"index.php/ajax/selects_filtro_portada",
                  data:"provincia="+$('#select_provincias').val(),
                  success: function(data){
                        $('#resultado').html(data);
                  }
                });
            });

       $('#select_subzonas').change(function() {
                $.ajax({
                  type:"POST",
                  url:"<?php echo base_url();?>"+"index.php/ajax/selects_filtro_portada2",
                  data:"subzona="+$('#select_subzonas').val(),
                  success: function(data){
                        $('#resultado2').html(data);
                  }
                });
            });

             $('#select_provincias').change();

            $("#loading").ajaxStop(function(){
                $(this).hide();
                $('#resultado').show();
            });
});
</script>
El PHP:
Código PHP:
function selects_filtro_portada(){

    
$provincia $_POST["provincia"];

    
$subzonas $this->Front->llenar_select_subzonas_filtro($provincia);
    
$subzonas $subzonas->result_array();

    
$localidades $this->Front->llenar_select_localidades_filtro($provincia);
    
$localidades $localidades->result_array();
    
    echo 
'Comarca:<br />
                       <select name="subzona" id="select_subzonas" style="width:150px;">
                       <option value = "0">Todas</option>'
;

    foreach (
$subzonas as $subzona){
                
$id_subzona $subzona['id_subzona'];
                
$nombre_subzona $subzona['nombre_subzona'];
                echo 
"<option value='$id_subzona'>$nombre_subzona</option>";
    }
     echo 
'</select>';

    echo 
'<div style="float:left; margin:7px 0 0 0;">Localidad:<br /></div>
                       <div id="resultado2">
                            <select name="localidad" id="select_localidades" style="width:150px;">
                            <option value = "0">Todas</option>'
;

      foreach (
$localidades as $localidad){
                
$id_localidad $localidad['id_municipio'];
                
$nombre_localidad $localidad['nombre'];
                echo 
"<option value='$id_localidad'>$nombre_localidad</option>";
    }

     echo 
'</select></div>';

}

function 
selects_filtro_portada2(){

    
$subzona $_POST["subzona"];
   
    
$localidades $this->Front->llenar_select_localidades_filtro2($subzona);
    
$localidades $localidades->result_array();
    echo 
'<select name="localidad" id="select_localidades" style="width:150px;">
                            <option value = "0">Todas</option>'
;

      foreach (
$localidades as $localidad){
                
$id_localidad $localidad['id_municipio'];
                
$nombre_localidad $localidad['nombre'];
                echo 
"<option value='$id_localidad'>$nombre_localidad</option>";
    }

     echo 
'</select>';


Código HTML:
 <div class="px180" style="height:75px;" id="loading" style="display:none">
                Cargando filtros...
                </div>
               <div class="px180" style="height:75px;" id="resultado">
                       
               </div> 
Espero haberme explicado, muchas gracias.

Última edición por Sonairo; 13/10/2010 a las 08:26
  #2 (permalink)  
Antiguo 14/10/2010, 07:33
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 3 meses
Puntos: 14
Respuesta: Selects dependientes

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.  
  3.         $("#loading").ajaxStart(function(){
  4.                 $(this).show();
  5.                 $('#resultado').hide();
  6.         });
  7.  
  8.         $('#select_provincias').live('change', function() {
  9.                 $.ajax({
  10.                   type:"POST",
  11.                   url:"<?php echo base_url();?>"+"index.php/ajax/selects_filtro_portada",
  12.                   data:"provincia="+$('#select_provincias').val(),
  13.                   success: function(data){
  14.                         $('#resultado').html(data);
  15.                   }
  16.                 });
  17.             });
  18.  
  19.        $('#select_subzonas').live('change', function() {
  20.                 $.ajax({
  21.                   type:"POST",
  22.                   url:"<?php echo base_url();?>"+"index.php/ajax/selects_filtro_portada2",
  23.                   data:"subzona="+$('#select_subzonas').val(),
  24.                   success: function(data){
  25.                         $('#resultado2').html(data);
  26.                   }
  27.                 });
  28.             });
  29.  
  30.             $("#loading").ajaxStop(function(){
  31.                 $(this).hide();
  32.                 $('#resultado').show();
  33.             });
  34. });

Etiquetas: ajax, dependientes, selects
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:31.