<?php
session_start();
include("connection.php");
$id=$_SESSION['id'];
?>
<!DOCTYPE html>
<html class="beautiful js " xml:lang="en" lang="en">
<head>
<link href="120gb_files/index_packaged.css" media="screen" rel="stylesheet" type="text/css">
<title>mackbook_how to find</title>
</head>
<body>
<form method="post">
<div class="box">
<div class="button">
<select id="screen_size" class="fancy" style="border:1px solid #ccc;" >
<option selected="selected" value="">Screen Size</option>
<?php
$sql="select * from `mackbook`";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
?>
<option data-id="965" value="<?php echo $row['screen_size'];?>"><?php echo $row['screen_size'];
$_SESSION['size']=$row['screen_size'];
?></option>
<?php }?>
</select>
</div>
<div class="button" style="margin-top:50px;">
<select id="processor" class="fancy" style="border:1px solid #ccc;display:none">
<option selected="selected" value="">Processor</option>
<?php
$sql="select * from `mackbook`";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
?>
<option data-id="970" value="<?php echo $row['processor']?>"><?php echo $row['processor'];
$_SESSION['processor']=$row['processor'];
?></option>
<?php }?>
</select>
</div>
<div class="button" style="margin-top:50px;" >
<select id="hard_drive" class="fancy" style="border:1px solid #ccc;display:none">
<option selected="selected" value="">Hard Drive</option>
<?php
$sql="select * from `mackbook`";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result))
{
?>
<option data-id="993" value="<?php echo $row['hard_drive']?>"><?php echo $row['hard_drive'];
$_SESSION['hard_drive']=$row['hard_drive'];
?></option>
<?php }?>
</select>
</div>
<div class="button" style="margin-top:20px;" >
<a href="offer.php?id=<?php echo $id;?>" style="text-decoration:none;" target="_top"><input type="button" value="Next" class="next" style="display:none"/></a>
</div>
</div>
<div class="top_notify">
<div class="container"></div>
</div>
<div style="height:auto;" id="stacks_content" class="macbook">
<div style="display: block; float:right;" id="help_floater"><h3> How to find your processor speed and screen size </h3>
<div class="content">
<div class="section">
<h4> Step 1 </h4>
<p> Turn the computer on and the go to the >About this Mac </p>
<img src="120gb_files/laptop_help_step1_original.png" alt="laptop-help-step1">
<div class="clear"></div>
</div>
<div class="section">
<h4> Step 2 </h4>
<p> Turn the computer on and the go to the >About this Mac </p>
<img src="120gb_files/laptop_help_step2_original.png" alt="laptop-help-step2">
<div class="clear"></div>
</div>
<div style="clear:both"></div>
<div class="section">
<h4> <br/>Step 3 </h4>
<p> Turn the computer on and the go to the >About this Mac </p>
<img src="120gb_files/laptop_help_step4_original.png" alt="laptop-help-step3">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
what i have to done is that their are three select box 2 select box are hide when page lode first when i select value from first drop down 2nd drop down will shoe and when select value from 2nd drop down 3rd drop down show and when selecting value from thidr drop down submit button will be shown i use some java script and jquery but not get the proper solution because value in drop down comes from database any one have any idea about this please help me out thanx in advance.