You may or may not need this, but it could come in handy at one point in time. So lets start..

I will show you the basics here, you may download the source at the bottom of the page.

View the DEMO

index.html

include these into the head section of the page. ajax.js is the Sack js functions. I will get into Sack later.

this goes into the head as well.

var ajax = new Array();

function getTextList(sel)

{

var color = document.getElementById('color').value; //gets value from text input

document.getElementById('colorReturn').options.length = 0;

if(color.length>0){

var index = ajax.length;

ajax[index] = new sack();

ajax[index].requestFile = 'getColor.php?color='+color; //sends the GET to the php page

ajax[index].onCompletion = function(){ createText(index) };

ajax[index].runAJAX();

}

}

function createText(index)

{

var obj = document.getElementById('colorReturn'); //retruns the options from the php page

eval(ajax[index].response);

}

The form

Filter the colors - Start typing black.

Thats it for the index page. pretty straight forward. So now for the fun part.

getColor.php – This page contains the sql and php that returns the

mysql_connect("localhost", "username", "password") or die(mysql_error());

mysql_select_db("database") or die(mysql_error());

$color = $_GET['color'];

if(isset($_GET['color'])){

$result = mysql_query("SELECT color FROM colors WHERE color LIKE '%$color%' LIMIT 0,10")

or die(mysql_error());

while($color = mysql_fetch_array( $result ))

{

echo 'obj.options[obj.options.length] = new Option("'.$color['color'].'","'.$color['color'].'");';

}

}

Its not the most detailed tutorial, but im not a tutorial guy.

View the DEMO

Download the SOURCE

Well everyone, I’m almost done with the generator!!

Watch this short clip to see it in action.

If you are interested in this tool it is for sale, while I get together a payment system you can contact me about trying out a beta.

DEMO

2 and 3 Dropdowns available in the download.

It is fairly simple and consists of only 3 files. An index, database connection and a function file. So lets start.

Make your database table and fields. you can use mine for now.

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

INSERT INTO `two_drops` (`id`, `tier_one`, `tier_two`) VALUES
(1, 'Colors', 'Red'),
(2, 'Colors', 'Blue'),
(3, 'Colors', 'Green'),
(4, 'Colors', 'Yellow'),
(5, 'Colors', 'Black'),
(6, 'Shapes', 'Square'),
(7, 'Shapes', 'Circle'),
(8, 'Shapes', 'Triangle'),
(9, 'Shapes', 'Rectangle'),
(10, 'Shapes', 'Oval');

Make your connection to your database. db.php

mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("database") or die(mysql_error());

Next we will add the jQuery, loading, results and main form in index.php

add your includes at the top of the page.

  //include your database connection and function files.
  include('db.php');
  include('func.php');

and the rest of the page.

//jquery framework

$(document).ready(function() {
	$('#wait_1').hide();
	$('#drop_1').change(function(){
	  $('#wait_1').show();
	  $('#result_1').hide();
      $.get("func.php", {
		func: "drop_1",
		drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

Select a Category


    
    
    

Ok, that was easy enough. Now for the functions func.php

//**************************************
//     Page load dropdown results     //
//**************************************
function getTierOne()
{
	$result = mysql_query("SELECT DISTINCT tier_one FROM two_drops")
	or die(mysql_error());

	  while($tier = mysql_fetch_array( $result )) 

		{
		   echo ''.$tier['tier_one'].'';
		}

}

//**************************************
//     First selection results     //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
   drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{
    include_once('db.php');
	$result = mysql_query("SELECT * FROM two_drops WHERE tier_one='$drop_var'")
	or die(mysql_error());

	echo '

Choose one
'.$drop_2['tier_two'].'


 ';
    echo '
';
}

And thats it. Download the files below.

DEMO

DOWNLOAD

Want more helpful and free scripts? Buy me a cup of coffee to keep me goin!