Index.php:
<html> <body> <form id="custom" method="post" name="form" enctype="multipart/form-data"> <fieldset title="Location Information" > <legend></legend> <label>catgories</label> <select name="main_id" onchange="showCustomer(this.value)"> <option value="" class="search"><---Select the catagoeris--> </option> <?php $sel1=mysql_query("select * from categories order by cat_name asc"); while($cat=mysql_fetch_array($sel1)) { $cat_id=$cat['cat_id']; $cat_name=$cat['cat_name']; <option value="<?php echo $cat_id; ?>"><?php echo $cat_name; ?></option> <?php } ?> </select> <label>Sub Catgories</label> <p id="txtHint"> <select name="sub" onchange="show(this.value)"> <option value=""><---Select sub catagoeris--></option> </select> </p> <p id="sub_sub"> <select name="sub_sub"> <option value=""><--Select name--></option> </p> </body> </html>
ajax.php:
<?php include("conn.php"); ?> <?php if(isset($_GET['q'])) { $id1=$_GET['q']; ?><p> <select onchange="show(this.value)" name="sub"> <option value=""><--Select--></option> <?php $select1=mysql_query("select * from sub_categories where cat_id='$id1'"); while($menu2=mysql_fetch_array($select1)) { ?> <option value="<?php echo $menu2['sub_cat_id'];?>"> <?php echo $menu2['sub_cat_name'];?></option> <?php } ?> </select> </p> <?php } if(isset($_GET['s'])) { $id3=$_GET['s']; $sub_sub_cat=mysql_query("select * from sub_sub_categories where sub_cat_id='$id3'") or die(mysql_error()); if(mysql_num_rows($sub_sub_cat)=="") { } else { ?> <p> <select name="sub_sub"> <option value=""><--Select name--></option> <?php $select2=mysql_query("select * from sub_sub_categories where sub_cat_id='$id3'"); while($menu3=mysql_fetch_array($select2)) { ?> <option value="<?php echo $menu3['id'];?>"> <?php echo $menu3['sub_sub_cat_name'];?></option> <?php } ?> </select> </p> <?php }} ?>
ajax script:(script1)
<script> function showCustomer(str) { var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax.php?q="+str,true); xmlhttp.send(); } </script>
ajax script:(script2)
<script> function show(str) { var xmlhttp; if (str=="") { document.getElementById("sub_sub").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("sub_sub").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax.php?s="+str,true); xmlhttp.send(); } </script>
This Coding is used for categories and their sub categories and sub sub categories.If we click on category and it display their that particular categories types and also that sub category you click that particular sub sub categories types also displayed.The script1 is used for to display the sub category and script2 is used for to display the sub sub categories.I hope this very useful for you.
db screenshot:category
No comments:
Post a Comment