Multiple Chained selects

Multiple Chained selects

I am quite new to anything on javascript, jquery, ajax, actually i am still not sure what ajax is tho i know i am using some of it, i did this from a tutorial, edited it to fulfill my needs and i understand completly how it works.
 
but now i need to be able to add another row of chained selects on a button click(i can do this) what i am unable to think about is how to maintain the functioning of loading the selects with what i understand to be an ajax call. without changing the rest of the selects.
 
here is my code
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
        $("select#localidad").attr("disabled","disabled");
        $("select#user").attr("disabled","disabled");
        $("select#region").change(function(){
         $("select#localidad").attr("disabled","disabled");
         $("select#user").attr("disabled","disabled");
         $("select#localidad").html("<option>Cargando...</option>");
         var id = $("select#region option:selected").attr('value');   
         
         $.post("includes/select_localidad.php", {id:id}, function(data){       
          $("select#localidad").removeAttr("disabled");
          $("select#localidad").html(data);       
         });   
        });
        $("select#localidad").change(function(){
         $("select#user").attr("disabled","disabled");
         $("select#user").html("<option>Cargando...</option>");
         var id = $("select#localidad option:selected").attr('value');   
         
         $.post("includes/select_user.php", {id:id}, function(data){       
          $("select#user").removeAttr("disabled");
          $("select#user").html(data);       
         });   
        });
        
        
        $("form#select_form").submit(function(){           
         var reg = $("select#region option:selected").attr('value');           
         var loc = $("select#localidad option:selected").attr('value');  
         var usr = $("select#user option:selected").attr('value');        
         if(reg>0 && loc>0 && usr>0)           
         {               
          var result = $("select#user option:selected").html();               
          $("#result").html('your choice: '+result);           
         }           
         else           
         {               
          $("#result").html("you must choose three options!");           
         }           
         return false;       
        });
        
        
        
                });
            </script>
        </head>
        <body>
        <?php include "includes/registro.class.php"; ?>
       
            <form id="select_form">
                Region:<br />
                <select id="region">
         <?php echo $opt->ShowRegion(); ?>
                </select>
                <br /><br />
     
               Localidad:<br />
                <select id="localidad">
                    <option value="0">Selecciona...</option>
                </select>
                <br /><br />
               
                Remitente:<br />
                <select id="user">
                 <option value="0">Selecciona...</option>
                </select>
                <br /><br />
               
                <input type="submit" value="Registrar" />
            </form>
            <div id="result"></div>
        </body>
    </html>













































































and here is the class if u need to take a look at it

 

  1. <?php
    class SelectList
    {   
     protected $conn;        
      public function __construct()
      {           
       $this->DbConnect();       
      }        
      
      protected function DbConnect()
      {
       include "db_config.php";
       $this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
       mysql_select_db($db,$this->conn) OR die("can not select the database $db");           
       return TRUE;       
      }      
      
      public function ShowRegion()       
      {           
       $sql = "SELECT * FROM region";           
       $res = mysql_query($sql,$this->conn);           
       $category = '<option value="0">Selecciona...</option>';           
       while($row = mysql_fetch_array($res))           
       {               
        $category .= '<option value="' . $row['id'] . '">' . $row['region'] . '</option>';
       }           
       return $category;       
       }        
       
      public function ShowLocalidad()       
      {           
       $sql = "SELECT * FROM localidad WHERE region_id=$_POST[id]";
       $res = mysql_query($sql,$this->conn);           
       $type = '<option value="0">Selecciona...</option>';           
       while($row = mysql_fetch_array($res))           
       {              
        $type .= '<option value="' . $row['id'] . '">' . $row['localidad'] . '</option>';           
       }           
       return $type;      
      }
      public function ShowUser()       
      {           
       $sql = "SELECT * FROM usuarios WHERE localidad_id=$_POST[id] ORDER by ap_Paterno ASC";
       $res = mysql_query($sql,$this->conn);           
       $type = '<option value="0">Selecciona...</option>';           
       while($row = mysql_fetch_array($res))           
       {              
        $type .= '<option value="' . $row['id'] . '">' . $row['ap_Paterno'] . " " . $row['ap_Materno'] . ", " . $row['nombre'] . "(" . $row['mail'] . ")" . '</option>';           
       }           
       return $type;      
      }
    }
      
    $opt = new SelectList();
    ?>





















































Thanks!