Question

Hola, tengo un select que contiene categorías, y al lado un div con las productos.
Lo que quiero hacer mediante AJAX es que cuando haga click sobre una categoría me aparezcan los productos que pertenecen a dicha categoría en ese DIV.

Gracias de antemano.
Aquí una captura de la web:

http://jacholpas.files.wordpress.com/2014/02/captura-de-pantalla-2014-02-10-a-las-00-21-14.png

Answer 1

Hola Jabixo,

es una pregunta un poco más genérica de lo que parece, ya que muchas cosas dependen de la implementación del resto de las cosas.

Por un lado, debés hacer que el evento onchange del select dispare las acciones:

<select id="seciones" name="seciones" onchange="javascript: actualzarProductos();">
  <option value="1">Informática</option>
  <option value="2">Electrodométicos</option>
  <option value="3">Hogar</option>
  ...
</select>

y el lugar en dónde se verán las respuestas:

<div id="anuncios"></div>

Luego el código JavaScript en el head de la página que implementa la llamada AJAX que se dispara en la función actualzarProductos():

// crea el ambiente JS para recibir la respuesta dinámica
function Conectar(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest()
    } else {
        var xmlHttp = false;
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try {
            return ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        } // try
    } // else
} // Conectar()
var xmlHttp = Conectar();

function actualzarProductos() {
   // Obtiene el value del select
   unSelect = document.getElementById("secciones");
   valor = unSelect.ooptions[unSelect.selectedItem].value;
   // Limpia la respeusta anterior
   document.getElementById('anuncios').innerHTML = '';
   // Arma el URL para llamar al script que devuelve los anuncios de una sección
   url = 'anunciosPorSeccion.php?seccion='+valor;
   // Configura la llamada asincrónica
   xmlHttp.open("GET", url);
   xmlHttp.onreadystatechange = function() {
                // Cuando la llamada termina, muestra los datos
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById('anuncios').innerHTML = xmlHttp.responseText;
        }
   }
   xmlHttp.send(null);
}

Con esto, basta que el script anunciosPorSeccion.php devuelva el HTML correspondiente para mostrar los productos de la sección solitada vía $_GET['seccion']

Se puede hacer de formas más complicadas para generalizarlo, como pasar como parámetro el select del que se parte, pasar como parámetro el ID del DIV de destino, devolver XML en vez de HTML en el script PHP, etc.

Podrías en vez de usar JavaScript vanila usar algún framework, si es que estás familiarizado copn alguno, pero el proceso siempre será: ver cual selecciona el usuario, hacer la llamada a tu script para obtener la respuesta, mostrar la respuesta dada.

Saludos!

Answer 2

Eso es muy pero muy fácil con jquery

tienes el id de tu combo:

lo mandas llamar con el evento change de jquery:

$( "#idDelSelect" ).change(function() {
    //aqui va ir tu codigo ajax, del cual tienes que regresar un .json desde php
    // por ejemplo asi:   echo json_encode($tuvariable);
   //entonces mandas llamar el php de esta manera

        $.post("archivo.php").done(function(data) {
                    data = JSON.parse(data);
        for(var i=0; i<data.length;i++){
              $("#tuDiv").append('<div>'+data[i].variable+'</div>');
        }
});

});

si te interesa mi propuesta puedo hacerte un ejemplo funcional... Saludos