Combos dependientes con jQuery y AJAX

Esta es mi adaptación del ejemplo de combos dependientes de 9Lessons.

index.php

<!--?php      //libreria de funciones de DB     include_once("datalib.php"); ?-->

<script type="text/javascript" language="javascript" src="js/jquery-1.6.1.js"></script><script type="text/javascript" language="javascript" src="js/custom.js"></script>

 <!--?php             $result = getAreas();         ?-->

 <select id="subareas" name="subareas"> </select>

connection.php

<!--?php     $username = "user";     $userpass = "pass";     $server   = "localhost";     $database = "database";          $link = mysql_connect($server, $username, $userpass);          mysql_select_db($database, $link); ?-->

datalib.php

<!--?php include_once("connection.php"); function getAreas() {     $query =    "SELECT * ".                 "FROM areas ";          $result = mysql_query($query);          return $result;     } function getSubareas($id_area) {     $query =    "SELECT * ".                 "FROM subareas ".                 "WHERE id_area = $id_area";     //cuidado aqui! xss!          $result = mysql_query($query);          return $result;      } ?-->

ajax.php

<!--?php <br ?-->
include_once("datalib.php");

if($_POST['id_area'])
{
    $id = $_POST['id_area'];

    $result = getSubareas($id);

    while($row = mysql_fetch_array($result))
    {
        $id   = $row['id_subarea'];
        $data = $row['nombre'];

        echo ''.$data.'';
    }
}
?>

js/custom.js


$(document).ready(function()
{

    //Combo areas
    $("#areas").change(function(){

       //valores del combo
       var id_area = $(this).val();

       //valores por POST
       var postdata = "id_area=" + id_area;

       $.ajax({

           type:"POST",
           url:"ajax.php",
           data:postdata,
           cache:false,
           success: function(html)
           {
               $("#subareas").html(html);

           }
       });

    });

});

Fuente:
9Lessons

3 comentarios en “Combos dependientes con jQuery y AJAX

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s