jquery - index - Dropdown populate ajax

select item dropdownlist jquery

Question

Tengo el siguiente problema: cuando selecciono un elemento de un menú desplegable, quiero completar automáticamente otro menú desplegable a través de ajax. la idea es que la subcategoría (sub_type) no se carga después de seleccionar el "tipo".

HTML
<select id="type" name="type">
<option value="1">General</option>
<option value="2">Test</option>
</select>
<select id="sub_type" name="sub_type">
</select>


SCRIPT
    $("#type").change(function(){
    $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: ''true''}, function(j){
          var options = '''';
          for (var i = 0; i < j.length; i++) {
            options += ''<option value="'' + j[i].id+ ''">'' + j[i].name+ ''</option>'';
          }
        });
    $("#sub_type").html(options);
    });

Mi script ajax regresa:

[{id: 0, name: ''Mark''}, {id:1, name: ''Andy''}, {id:2, name: ''Richard''}]

Pero la subcategoria (selección de secont) no está cargada.

Answer 1

El problema es que estás asignando el html a #sub_type justo después de la llamada ajax JSON. Debe asignarlo en la función de devolución de llamada ajax como esta:

$("#type").change(function(){
  $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: ''true''}, function(j){
    var options = '''';
    for (var i = 0; i < j.length; i++) {
      options += ''<option value="'' + j[i].id + ''">'' + j[i].name + ''</option>'';
    }
    $("#sub_type").html(options);
  });    
});

Answer 2

Suponiendo que la función de éxito de Ajax se llame, cambie el código de la función a:

          var $subType = $("#sub_type");
          $subType.empty();
          $.each(j, function () {
            $subType.append($(''<option></option>'').attr("value", this.id).text(this.name));
          });

Sus principales problemas actualmente son:

• la función html se llama solo una vez porque está fuera de la función de éxito.
• los elementos en los datos de Ajax tienen las claves id y nombre y no optionValue y optionDisplay

Actualizar:

El JSON devuelto no es válido. La cadena debe ser comillada con comillas dobles, no comillas simples. Como resultado, la llamada getJSON() falla silenciosamente.