Playing with HTML Dropdowns Select Lists Using PHP, Mysql, Jquery

Hey friends, While making a form we found ourselves in a condition when our one dropdown is based on previous dropdown Means when we select something in the upper drop down and then Option of Next dropdown is based on the previous selection. So my this tutorial is all about this concept. So we are going to use HTML, JQuery, PHP,Mysql. So lets start.

 Note: This Program Is Not Difficult To Build but the requirement is to understand the key functionality of this whole script. Such as :

1. Getting The value from the Element using Jquery
2. Sending that value to another page using jquery post function
3. Receiving the Result of Post Function

DownLoad

first of all we want to create a basic structure of our page. So lets finish that first. 

 <div class="container">
			<header>
				<h1><strong>Playing With Select List</strong></h1>
				<h2>Select One List To see Output On Other</h2>
			</header>
        </div>
	<span style="margin-left:22%">
			<label>Category :</label> <select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
include('db.php');
$sql=mysql_query("select id,data from data where weight='1'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
 } ?>
</select>    
<label>Sub Category :</label> <select name="sucategory" class="subcategory">
<option selected="selected">--Select subcategory--</option>

</select>
</span>

So we are done with the Html Code. our page will be looking like the image. So The basic criteria that is going to work in this tutorial is that When you select any of the Item in first list. Jquery will pick that value our page and then send it to the next php page and after query it will return the result in html form which will be shown in the second dropdown list. 

So that means our result in second dropdown list will be the outcome of the first dropdown list And in this way you can create as many lists you want but you just have to make a relation between the element of first drop down list and the second drop down list. 

Lets move to jquery code that will pick the data from our page. So our jquery code will be like this.

           $(document).ready(function()
		{
		$(".category").change(function()
		{
		var id=$(this).val();
		var dataString = 'id='+ id;

		$.ajax
		({
		type: "POST",
		url: "ajax_category.php",
		data: dataString,
		cache: false,
		success: function(html)
		{
		$(".subcategory").html(html);
		} 
		});

		});
		});

Now lets come to the php code that will return the output according to our file so it will be like given below

include('db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select b.id,b.data from data_parent a,data b where b.id=a.did and parent='$id'");

while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo ''.$data.'';
}
}

so this is all about the php code. You can download the code. Hope it will help.