cascading dropdown

[jpopuk]

Hi, I want to create a cascading dropdown with each selection pulling data from database (which I have already setup).

 

Here is the form I have to show you what I am trying to achieve:

<select name="food">
	<option></option>
	<option value="Fruit">Fruit</option>
	<option value="Dairy">Dairy</option>
	<option value="Junk">Junk</option>
</select>
<select name="select">
	<option></option>
	<option>Fruit</option>
	<?php foreach (get_fruit() as $fruit) { ?>
		<option value="<?php echo $fruit['fruit_name']; ?>"><?php echo $fruit['fruit_name']; ?></option>
	<?php } ?>
	<option>Dairy</option>
	<?php foreach (get_dairy() as $dairy) { ?>
		<option value="<?php echo $dairy['dairy_name']; ?>"><?php echo $dairy['dairy_name']; ?></option>
	<?php } ?>
	<option>Junk</option>
	<?php foreach (get_junk() as $junk) { ?>
		<option value="<?php echo $junk['junk_name']; ?>"><?php echo $junk['junk_name']; ?></option>
	<?php } ?>
</select>

Can anyone point me in the direction of a decent tutorial, or have any tips or advice that would be great!

 

Thanks

 

P

[Mothy]

I'm assuming you want the user to select a the first drop-down and if the user selects "Fruit" they can select different fruit from the second drop-down etc?

 

You can use pure JavaScript if the items are static but if the items are to be pulled from a database you will need to use ajax to achieve

 

• Graphnick has a tutorial which gets the drop-downs from a XML document.
• Ali Hammad Shah has a video tutorial on this as well.

The new Boston  has some tutorials for AJAX as well that give you some information on how to use this if you want to play about with other ideas..

[jpopuk]

That is exactly what I am trying to achieve. Looks like AJAX is the way to go.

 

Thanks for reply. - If anyone else has suggestions that would be helpful!

 

Ta

[Psycho]

Guru Barand has a class for doing this called baaSelect. I'm not sure if the class uses AJAX or not. If the lists of options are relatively small, I would suggest querying all the options and outputting them as JavaScript arrays so all the logic can happen on the client side. If you use AJAX there will typically be a delay when making a selection in order to populate the other list(s). In some cases it is possible for errors to occur if you don't enable/disable things to prevent them. If it is all done client-side it takes place nearly instantaneously. Only if the lists are very extensive and loading them into the HTML source will be a performance issue would I make these AJAX enabled.

[Barand]

My class was designed for hierarchical data structures (eg, country/region/city or manufacturer/model/engineSize). It requires the table indexes to be numeric.

 

It doesn't use ajax, it generates the js functions to handle the selection and build the arrays.

 

If you want an Ajax solution, I posted an example application yesterday for handling database/tables/columns http://forums.phpfreaks.com/topic/288437-how-to-update-all-databases/?do=findComment&comment=1479216

[jpopuk]

Already have database side sorted.

 

Was just hoping it would be simple like: if option 1 selected then option 1 value echo in second dropdown.

 

Something like that.

 

Cheers

[fastsol]

I have a easy tutorial on this also

http://amecms.com/article/Building-Chained-Select-Boxes-with-Jquery-and-PHP

[jpopuk]

Thanks for reply guys. Fastsol - your tutorial looks pretty much what I am looking for.

 

In need of sleep now so will get on the case in the morning. Hoping it will be straight forward to do with the database!

 

Again thanks!

[Barand]

Here's sample code using baaSelect class

<?php

$db = new mysqli(HOST,USERNAME,PASSWORD,'test'); // use your credentials
include('baaSelect.php');

/* UNCOMMENT BLOCK TO CREATE TEST DATA ***************************************

$sql = "CREATE TABLE jpop_cat (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
cat_desc varchar(20)
)";
$db->query($sql);

$sql = "INSERT INTO jpop_cat (cat_desc) VALUES
('Fruit'),
('Vegetables'),
('Junk food')
";
$db->query($sql);

$sql = "CREATE TABLE jpop_food (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
cat_id INT,
food_desc varchar(20)
)";
$db->query($sql);

$sql = "INSERT INTO jpop_food (cat_id,food_desc) VALUES
(1,'Apple'),
(1,'Banana'),
(1,'Cherry'),
(2,'Cabbage'),
(2,'Potato'),
(2,'Swede'),
(3,'Burger'),
(3,'Deep fried Mars bar'),
(3,'Turkey twizzler')
";
$db->query($sql);
*******************************************************************************/
    // create baaselect object
$sel = new baaSelect(DB_MYSQLI, $db);

    // create the 2 menu objects
$sel->addSelect('catmenu', 'jpop_cat', 'id', 'cat_desc', '', BY_ID, '--category--');
$sel->addSelect('foodmenu', 'jpop_food', 'id', 'food_desc', 'cat_id', BY_TEXT, '--food item--');

?>

<html>
<head>
<meta name="generator" content="PhpED 12.0 (Build 12010, 64bit)">
<title>Example baaSelect</title>
<meta name="author" content="Barand">
<meta name="creation-date" content="05/13/2014">
    <?php 
        $sel->makeScript(); // create required js code and arrays
    ?>  
</head>
<body>
    <form method='get'>
    Food category <?php $sel->makeSelect('catmenu'); ?>
    <br><br>
    Food item <?php $sel->makeSelect('foodmenu'); ?>
    <br><br>
    <input type='submit' name='btnSubmit' value='Submit'>
    </form>
</body>
</html>

[jpopuk]

Fastsol, I am having a crack at your tutorial and I have hit a snag. I need to pull data from tables.

 

In the comments part you have put a bit saying to pull the Model FROM cars WHERE model = $model.

 

How would I do it so each selection has gets data from a different table ?

[Barand]

 

How would I do it so each selection has gets data from a different table ?

You wouldn't. Have one table with a category id column. See my test data above.

[jpopuk]

Thanks. I have set tables up already so just seeing if possible to do so. I do have a little function to get the data.

 

Is it possible to do a function inside an array? i.e.

$acura = array('foreach (get_make_acura() as $macura) { echo $macura['acura_name']; }');

Edited May 14, 2014 by jpopuk