Read 287 times | Created 2013-01-12 16:47:01 | Updated 2013-01-12 16:47:01 | | |

 

<?php
/****** CHAINED SELECT BOX *****
 FILE      : chain.php
 CREATE    : 2012-12-12 
 UPDATE    : 2012-12-12 
 CREATED BY: cahya dan
********************************
SAMPLE DATABASE: 
database name : test
/-------------------------------

CREATE TABLE IF NOT EXISTS `three_drops` (
  `id` int(11) NOT NULL auto_increment,
  `tier_one` varchar(255) NOT NULL,
  `tier_two` varchar(255) NOT NULL,
  `tier_three` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM ;

INSERT INTO `three_drops` (`id`, `tier_one`, `tier_two`, `tier_three`) VALUES
(1, 'Chevy', 'Camaro', 'Black'),
(2, 'Chevy', 'Camaro', 'White'),
(3, 'Chevy', 'Trailblazer', 'Blue'),
(4, 'Chevy', 'Trailblazer', 'Red'),
(5, 'Chevy', 'Camaro', 'Red'),
(6, 'Ford', 'Mustang', 'White'),
(7, 'Ford', 'Mustang', 'Red'),
(8, 'Ford', 'Mustang', 'Black'),
(9, 'Ford', 'F-350', 'White'),
(10, 'Ford', 'F-350', 'Green'),
(11, 'Honda', 'Civic', 'Black'),
(12, 'Honda', 'Civic', 'Red'),
(13, 'Honda', 'Civic', 'Silver'),
(14, 'Honda', 'Prelude', 'Red'),
(15, 'Honda', 'Prelude', 'White');

*********************************/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chained Select Boxes using PHP, MySQL and jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#wait_1').hide();
   $('#drop_1').change(function(){
   $('#wait_1').show();
   $('#result_1').hide();
   $.get("ajax.chain.php", {
	func: "tier_2",
	drop_var: $('#drop_1').val()
      }, function(response){
         $('#result_1').fadeOut();
         setTimeout("finishAjax1('result_1', '"+escape(response)+"')", 400);
      });
      return false;
   });
});

function finishAjax1(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax2(id, response) {
  $('#wait_2').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>
</head>
<body>
<p>
<form action="" method="post">
    <select name="drop_1" id="drop_1">
      <option value="" selected="selected" disabled="disabled">Select a Category</option>
      <?php 
      include("class.chain.php");
      $chain=new chain();
      $chain->get_tier_1(); 
      ?>
    </select> 
    <span id="wait_1" style="display: none;">
      <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_1" style="display: none;"></span>
    <span id="wait_2" style="display: none;">
      <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_2" style="display: none;"></span> 
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
	$drop   = $_POST['drop_1'];
	$drop_2 = $_POST['drop_2'];
	$drop_3 = $_POST['drop_3'];
	echo "You selected a ";
	echo $drop_3." ".$drop." ".$drop_2;
}
?>
</body>
</html>

//=====================================
<?php
/**************************
 FILE      : ajax.chain.php
 CREATE    : 2012-12-12 
 UPDATE    : 2012-12-12 
 CREATE BY : cahya dan
**************************/
include("class.chain.php");
if(isset($_GET['func']))
{
  $chain=new chain();
  if($_GET['func'] == "tier_2") 
  {
    $chain->get_tier_2($_GET['drop_var']);
  }
  if($_GET['func'] == "tier_3") 
  {
   $chain->get_tier_3($_GET['drop_var']);
  }
}  
?>
//=====================================
<?php
/**************************
 FILE      : class.chain.php
 CREATE    : 2012-12-12 
 UPDATE    : 2012-12-12 
 CREATE BY : cahya dan
**************************/
class chain
{
  public $db;
  private $dbhost='localhost';
  private $dbuser='root';
  private $dbpass='';
  private $dbname='test';
  
  function __construct()
  {
    $this->db=new mysqli($this->dbhost,$this->dbuser,$this->dbpass,$this->dbname);
  }

  //**************************************
  //     tier 1 selection     //
  //**************************************
  function get_tier_1()
  {
    $result = $this->db->query("SELECT DISTINCT tier_one FROM three_drops");
    while($tier = $result->fetch_object())
    {
       echo '<option value="'.$tier->tier_one.'">'.$tier->tier_one.'</option>';
    }
  }
  //**************************************
  //     tier 2 selection      //
  //**************************************
  function get_tier_2($drop_var)
  {
    $result = $this->db->query("SELECT DISTINCT tier_two FROM three_drops WHERE tier_one='$drop_var'");
    echo '<select name="drop_2" id="drop_2">
          <option value=" " disabled="disabled" selected="selected">Choose one</option>';
          while($drop_2 = $result->fetch_object())
          {
            echo '<option value="'.$drop_2->tier_two.'">'.$drop_2->tier_two.'</option>';
          }
    echo '</select>';
    //---- add similiar script with the below script for each additional selection chains
    echo "<script type="text/javascript">
      $('#wait_2').hide();
      $('#drop_2').change(function(){
        $('#wait_2').show();
        $('#result_2').hide();
        $.get("ajax.chain.php", {
          func: "tier_3",
          drop_var: $('#drop_2').val()
        }, function(response){
          $('#result_2').fadeOut();
          setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
        });
        return false;
      });
    </script>";
  }
  //**************************************
  //     tier 3 selection     //
  //**************************************
  function get_tier_3($drop_var)
  {
    $result = $this->db->query("SELECT * FROM three_drops WHERE tier_two='$drop_var'");
    echo '<select name="drop_3" id="drop_3">
        <option value=" " disabled="disabled" selected="selected">Choose one</option>';
        while($drop_3 = $result->fetch_object())
        {
          echo '<option value="'.$drop_3->tier_three.'">'.$drop_3->tier_three.'</option>';
        }
    echo '</select> ';
    //------- add submit button when the last selection is appear
    echo '<input type="submit" name="submit" value="Submit" />';
  }
}
?>