Problema actualizando valores de un SELECT

[miwelillo]

Hola a todos,

Tengo 2 selects que quiero hacer dependientes, es decir, que el segundo se actualice con valores de la BDD cuando cambie el primero.

El primer select tiene el id #item_select_1 mientras que el segundo tiene #item_select_2

Los datos se obtienen mediante una funcion que realiza una peticion a una URL y me devuelve una respuesta JSON. Hasta aqui todo correcto, lo he probado y funciona bien. El problema es que no consigo actualizar los valores del segundo select aun cuando la peticion me recoge los valores correctamente.

Os pongo el codigo:

Código PHP:

  <script type="text/javascript"> 
        $(function(){
            $('#item_select_1').change(function(){
                var ajax = $.ajax({
                    type: "GET",
                    url: "/ad/getmodelos/id/" + $(this).val(),
                    async: true,
                    dataType: "json",
                    success: function(data){
                        var options = '';
                        for (var i = 0; i < data.length; i++) {
                            options += '<option value="' + data[i].optionValue + '">' + data[i].optionDisplay + '</option>';
                        }
                        console.log(options);
                        $("#item_select_2").html(options);
                    }
                });
                console.log(ajax);
            });
        })();
    </script>  
  

Vereis que hay una linea en la que hago "console.log(ajax)" para examinar la peticion. Si miro en la consola JS veo que efectivamente me devuelve

responseText: "{"3":"nombre modelo"}", etc. es decir, la respuesta JSON por lo que la peticion se recibe bien. Pero por algun motivo no se actualizan los valores del select. Mencionar que estoy usando Zend Framework 1.X pero estoy haciendo esto a mano ya que aun no domino demasiado la libreria ZendX.

Un saludo.

[masterpuppet]

No parece haber nada raro, la variable options tiene el html correctamente generado ?, el nodo #item_select_2 existe en el DOM al momento de setearle el html ?

[miwelillo]

Iniciado por masterpuppet

No parece haber nada raro, la variable options tiene el html correctamente generado ?, el nodo #item_select_2 existe en el DOM al momento de setearle el html ?

La variable "options" esta en blanco, eso es lo raro.

El DOM contiene los ids correctamente setteados, te pongo el codigo que me genera Zend_Form cuando saco la salida por el viewer:

Código PHP:

  <input type="text" name="titulo_anuncio" id="titulo_anuncio" value=""></dd>
<dt id="item_select_1-label"><label for="item_select_1" class="optional">Marca:</label></dt>
<dd id="item_select_1-element">
<select name="marca_anuncio" id="item_select_1">
    .....
</select></dd>
<dt id="item_select_2-label"><label for="item_select_2" class="optional">Modelo:</label></dt>
<dd id="item_select_2-element">
<select name="modelo_anuncio" id="item_select_2">
   ...
</select></dd>  
   

[miwelillo]

Acabo de probar otra cosa, he hecho un beforeSend seteandole las cabeceras de JSON y esto es lo que tengo:

Código PHP:

  <script type="text/javascript"> 
        $(function(){
            $('#item_select_1').change(function(){
                var ajax = $.ajax({
                    type: "GET",
                    url: "/ad/getmodelos/id/" + $(this).val(),
                    async: true,
                    dataType: "json",
                    beforeSend: function(x) {
                        if(x && x.overrideMimeType) {
                         x.overrideMimeType("application/j-son;charset=UTF-8");
                        }
                       },                        
                    success: function(data){
                        var options = '';                     
                        for (var i = 0; i < data.length; i++) {
                            options += '<option value="' + data[i].optionValue + '">' + data[i].optionDisplay + '</option>';
                        }
                        console.log(data);
                    }
                });                              
            });
        })();
    </script>  
  

Lo que me muestra la consola:

Código PHP:

  Object
3: "Modelo 3"
__proto__: Object  
   

Pero si hago un console.log(data.length) me muestra: undefined, como si no encontrase nada ??? si intento mirar el contenido de options sigue estando en blanco ya que no hace el for..loop