API tools faq
paste
Advertisement
cdsatrian

chained select box

cdsatrian
Dec 11th, 2012
157
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 6.11 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. /****** CHAINED SELECT BOX *****
  3.  FILE      : chain.php
  4.  CREATE    : 2012-12-12
  5.  UPDATE    : 2012-12-12
  6.  CREATED BY: cahya dan
  7. ********************************
  8. SAMPLE DATABASE:
  9. database name : test
  10. /-------------------------------
  11.  
  12. CREATE TABLE IF NOT EXISTS `three_drops` (
  13.   `id` int(11) NOT NULL auto_increment,
  14.   `tier_one` varchar(255) NOT NULL,
  15.   `tier_two` varchar(255) NOT NULL,
  16.   `tier_three` varchar(255) NOT NULL,
  17.   PRIMARY KEY  (`id`)
  18. ) ENGINE=MyISAM ;
  19.  
  20. INSERT INTO `three_drops` (`id`, `tier_one`, `tier_two`, `tier_three`) VALUES
  21. (1, 'Chevy', 'Camaro', 'Black'),
  22. (2, 'Chevy', 'Camaro', 'White'),
  23. (3, 'Chevy', 'Trailblazer', 'Blue'),
  24. (4, 'Chevy', 'Trailblazer', 'Red'),
  25. (5, 'Chevy', 'Camaro', 'Red'),
  26. (6, 'Ford', 'Mustang', 'White'),
  27. (7, 'Ford', 'Mustang', 'Red'),
  28. (8, 'Ford', 'Mustang', 'Black'),
  29. (9, 'Ford', 'F-350', 'White'),
  30. (10, 'Ford', 'F-350', 'Green'),
  31. (11, 'Honda', 'Civic', 'Black'),
  32. (12, 'Honda', 'Civic', 'Red'),
  33. (13, 'Honda', 'Civic', 'Silver'),
  34. (14, 'Honda', 'Prelude', 'Red'),
  35. (15, 'Honda', 'Prelude', 'White');
  36.  
  37. *********************************/
  38. ?>
  39. <!DOCTYPE html>
  40. <html lang="en">
  41. <head>
  42. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  43. <title>Chained Select Boxes using PHP, MySQL and jQuery</title>
  44. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  45. <script type="text/javascript">
  46. $(document).ready(function() {
  47.    $('#wait_1').hide();
  48.    $('#drop_1').change(function(){
  49.    $('#wait_1').show();
  50.    $('#result_1').hide();
  51.    $.get("ajax.chain.php", {
  52.     func: "tier_2",
  53.     drop_var: $('#drop_1').val()
  54.       }, function(response){
  55.          $('#result_1').fadeOut();
  56.          setTimeout("finishAjax1('result_1', '"+escape(response)+"')", 400);
  57.       });
  58.       return false;
  59.    });
  60. });
  61.  
  62. function finishAjax1(id, response) {
  63.   $('#wait_1').hide();
  64.   $('#'+id).html(unescape(response));
  65.   $('#'+id).fadeIn();
  66. }
  67. function finishAjax2(id, response) {
  68.   $('#wait_2').hide();
  69.   $('#'+id).html(unescape(response));
  70.   $('#'+id).fadeIn();
  71. }
  72. </script>
  73. </head>
  74. <body>
  75. <p>
  76. <form action="" method="post">
  77.     <select name="drop_1" id="drop_1">
  78.       <option value="" selected="selected" disabled="disabled">Select a Category</option>
  79.       <?php
  80.       include("class.chain.php");
  81.       $chain=new chain();
  82.       $chain->get_tier_1();
  83.       ?>
  84.     </select>
  85.     <span id="wait_1" style="display: none;">
  86.       <img alt="Please Wait" src="ajax-loader.gif"/>
  87.     </span>
  88.     <span id="result_1" style="display: none;"></span>
  89.     <span id="wait_2" style="display: none;">
  90.       <img alt="Please Wait" src="ajax-loader.gif"/>
  91.     </span>
  92.     <span id="result_2" style="display: none;"></span>
  93. </form>
  94. </p>
  95. <p>
  96. <?php if(isset($_POST['submit'])){
  97.     $drop   = $_POST['drop_1'];
  98.     $drop_2 = $_POST['drop_2'];
  99.     $drop_3 = $_POST['drop_3'];
  100.     echo "You selected a ";
  101.     echo $drop_3." ".$drop." ".$drop_2;
  102. }
  103. ?>
  104. </body>
  105. </html>
  106.  
  107. //=====================================
  108. <?php
  109. /**************************
  110.  FILE      : ajax.chain.php
  111.  CREATE    : 2012-12-12
  112.  UPDATE    : 2012-12-12
  113.  CREATE BY : cahya dan
  114. **************************/
  115. include("class.chain.php");
  116. if(isset($_GET['func']))
  117. {
  118.   $chain=new chain();
  119.   if($_GET['func'] == "tier_2")
  120.   {
  121.     $chain->get_tier_2($_GET['drop_var']);
  122.   }
  123.   if($_GET['func'] == "tier_3")
  124.   {
  125.    $chain->get_tier_3($_GET['drop_var']);
  126.   }
  127. }  
  128. ?>
  129. //=====================================
  130. <?php
  131. /**************************
  132.  FILE      : class.chain.php
  133.  CREATE    : 2012-12-12
  134.  UPDATE    : 2012-12-12
  135.  CREATE BY : cahya dan
  136. **************************/
  137. class chain
  138. {
  139.   public $db;
  140.   private $dbhost='localhost';
  141.   private $dbuser='root';
  142.   private $dbpass='';
  143.   private $dbname='test';
  144.  
  145.   function __construct()
  146.   {
  147.     $this->db=new mysqli($this->dbhost,$this->dbuser,$this->dbpass,$this->dbname);
  148.   }
  149.  
  150.   //**************************************
  151.   //     tier 1 selection     //
  152.   //**************************************
  153.   function get_tier_1()
  154.   {
  155.     $result = $this->db->query("SELECT DISTINCT tier_one FROM three_drops");
  156.     while($tier = $result->fetch_object())
  157.     {
  158.        echo '<option value="'.$tier->tier_one.'">'.$tier->tier_one.'</option>';
  159.     }
  160.   }
  161.   //**************************************
  162.   //     tier 2 selection      //
  163.   //**************************************
  164.   function get_tier_2($drop_var)
  165.   {
  166.     $result = $this->db->query("SELECT DISTINCT tier_two FROM three_drops WHERE tier_one='$drop_var'");
  167.     echo '<select name="drop_2" id="drop_2">
  168.          <option value=" " disabled="disabled" selected="selected">Choose one</option>';
  169.           while($drop_2 = $result->fetch_object())
  170.           {
  171.             echo '<option value="'.$drop_2->tier_two.'">'.$drop_2->tier_two.'</option>';
  172.           }
  173.     echo '</select>';
  174.     //---- add similiar script with the below script for each additional selection chains
  175.     echo "<script type=\"text/javascript\">
  176.      $('#wait_2').hide();
  177.      $('#drop_2').change(function(){
  178.        $('#wait_2').show();
  179.        $('#result_2').hide();
  180.        $.get(\"ajax.chain.php\", {
  181.          func: \"tier_3\",
  182.          drop_var: $('#drop_2').val()
  183.        }, function(response){
  184.          $('#result_2').fadeOut();
  185.          setTimeout(\"finishAjax2('result_2', '\"+escape(response)+\"')\", 400);
  186.        });
  187.        return false;
  188.      });
  189.    </script>";
  190.   }
  191.   //**************************************
  192.   //     tier 3 selection     //
  193.   //**************************************
  194.   function get_tier_3($drop_var)
  195.   {
  196.     $result = $this->db->query("SELECT * FROM three_drops WHERE tier_two='$drop_var'");
  197.     echo '<select name="drop_3" id="drop_3">
  198.        <option value=" " disabled="disabled" selected="selected">Choose one</option>';
  199.         while($drop_3 = $result->fetch_object())
  200.         {
  201.           echo '<option value="'.$drop_3->tier_three.'">'.$drop_3->tier_three.'</option>';
  202.         }
  203.     echo '</select> ';
  204.     //------- add submit button when the last selection is appear
  205.     echo '<input type="submit" name="submit" value="Submit" />';
  206.   }
  207. }
  208. ?>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!