4-level select boxes in php using ajax/jquery?

PHP
1

Hi all,
In my site, i used to select an multiple-categories in a single page based on first category, the second one will populate from database… and based on second one, the third select box will populate from database… and so on… using the javascript…

but the problem is;;

by selecting each category, the whole page will be reloading…

now i want to use the ajax/jquery based select boxes in it…
i tried some examples, but at the time of page loading only all 4 select boxes will be displaying…

Is there any other way to solve this…

Thanking you…

2

Did you try to use jquery ajax get/[URL=“http://api.jquery.com/jQuery.post/”]post? Can you post your code so far?

3

I used two files::

  1. select_cat.php

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".category").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

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

});

});
</script>
Category :
<select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
include('databasefile');
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
$sql=mysql_query("select cat_name from category order by cat_name");
while($row=mysql_fetch_array($sql))
{
$cname=$row['cat_name'];
echo '<option value="'.$cname.'">'.$cname.'</option>';
} ?>
</select> <br/><br/>

SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>

2.select_subcat.php


<?php
include('databasefile);
mysql_connect($server,$username,$password)or die(mysql_error());
mysql_select_db($database)or die(mysql_error());
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select s_name from subcat_l1 where cat_name='$id'");
while($row=mysql_fetch_array($sql))
{
$sname=$row['s_name'];
echo '<option value="'.$sname.'">'.$sname.'</option>';
}
}
?>
SubCategory :
<select name="subcat" class="subcat">
<option selected="selected">--Select SubCat--</option>
</select>
4

I think in your first page you should wrap these lines with an element (DIV) with a unique id:


<div id="showSubCat">
SubCategory : 
<select name="subcat" class="subcat"> 
<option selected="selected">--Select SubCat--</option> 
</select>
</div>

And your jquery code should look like this:


$(document).ready(function(){ 
    $(".category").change(function(){ 
        var id = $(this).val();
        var dataString = id:id;
        
        $.post("select_subcat.php",{dataString}, function(html){ 
            $(".showSubCat").html(html);
        });
    });
});

Try it yourself and let us know if that works.

Edit:
BTW, there is an error in your include statement of select_subcat.php file. Hope this is just a typo:


include('databasefile');
//.......................
5

Thank you for your reply…
It is showing again all select boxes, but options are not showing now…earlier it is showing.

6

What do you mean? Your script will just show two select boxes when loaded; one for category with populated categories (if you have in your category table). I think your table structure is somehow wrong or so. Can you show us the category table structure? You should have a column/field in the table to point the category whether it is main category or sub category.

7

first select box showing the category names in the list.
but second one is not showing the sub-cats, if i change the category in first select box…