follow  

Build a Dynamic Dropdown Menu in PHP

Posted in Tutorials | Tagged , , | Leave a comment

The following tutorial will show you how to code a dynamic dropdown menu in php. Having a dropdown menu function at your disposal means that you can integrate the menu into your site  alot easier and updating your menu (i.e. adding additional options) is much less time consuming, especially if your menu appears on several pages. Keep in mind that this is a very basic tutorial and serves as a starting point for your project.

 

For our menu we are going to incorporate two different values for each selection – one that is shown to the user and another that is used by our code. Why do it this way? There are times when the user understands data presented a certain way and the data must be much different to be useful to your website. I am using the example of a hexcode (i.e. #000000) and the  name of the color (i.e. black). This code will still work fine if you do not need two different values, simply repeat the same value twice in your array for both the key and the value. This will become more clear farther into the tutorial.

 

We are going to take this one step at a time, beginning with a hard coded dropdown menu. Create the menu and save it to a page called form.php.

 

<form id=”form1″ name=”form1″>

<label for=”dropdown1″>Label One:</label>

<select name=”dropdown1″ id=”dropdown1″>

<option value=””>Select one…</option>

<option value=”#FF0000″>red</option>

<option value=”#000000″>black</option>

<option value=”#0000FF”>blue</option>

<option value=”#00FF00″>green</option>

<option value=”#FFFF00″>yellow</option>

</select>

</form>

 

Pretty straight forward, but very cumbersome and it really does not do anything yet. The first thing we need to do is build a function that does the work for us. We start by including two parameters ($arr and $frm) so that we can pass data to our function. The first is for an associative array which populates our selections. The second is to give our dropdown menu a name so that we can find out what the user has chosen and process that choice.

 

Next, we start writing code to our page with our opening select tag using our second parameter for the name and id attributes. This is followed by a default option which has no value attribute identified. This is so the user sees a “Select one…” prompt when they see our menu. The heart of our function is a foreach loop that iterates through a specific array (identified by the $arr parameter) and write each key/value pair to our page. Finally, we include a closing select tag. Save the function on a separate page called dropdown.php.

 

<?php

function createdropDown ($arr, $frm) {

echo ‘<select name=”‘.$frm.'” id=”‘.$frm.'”>’;

echo ‘<option value=””>Select one…</option>’;

foreach ($arr as $key => $value) {

echo ‘<option value=”‘.$key.'” >’.$value.'</option>’;

}

echo ‘</select>’;

}

?>

 

Back to form.php where we will modify our menu so that it calls our function, grabbing data from an array called $colors building the menu dynamically.

 

<form id=”form1″ name=”form1″>

<label for=”dropdown1″>Label One:</label>

<?php createDropdown($colors, ‘dropdown1’); ?>

</form>

 

Sticking with our form.php page, we include a basic associative array with some basic colors and the corresponding hexcodes. If you try to display our page you will notice that it does not work. This because our page has no way of accessing our function, so we take of this with an include_once function on the line right after our array.

 

<?php

$colors = array (

‘#FF0000’ => ‘red’,

‘#000000’ => ‘black’,

‘#0000FF’ => ‘blue’,

‘#00FF00’ => ‘green’,

‘#FFFF00’ => ‘yellow’

);

?>

<?php include_once ‘dropdown.php’; ?>

<form id=”form1″ name=”form1″>

<label for=”dropdown1″>Label One:</label>

<?php createDropdown($colors, ‘dropdown1’); ?>

</form>

 

Everything seems to work fine now but our dropdown does not do anything. We can easily correct this by adding a submit button to our form and a few lines of code to process our form data. We start with a simple if statement. The first condition checks to see if the post method was used, the second checks to see if our submit button was clicked. If both conditions are true, the next line assigns the data contained in the $_POST superglobal to a variable called $post. Finally, we write the data to the page. Not very exciting I know but it is just for heuristic purposes. Once you have retrieved the data from the $_POST superglobal, you can do whatever you want with it.

 

<?php

$colors = array (

‘#FF0000’ => ‘red’,

‘#000000’ => ‘black’,

‘#0000FF’ => ‘blue’,

‘#00FF00’ => ‘green’,

‘#FFFF00’ => ‘yellow’

);

?>

<?php include_once ‘dropdown.php’; ?>

<form id=”form1″ name=”form1″ method=”post” action=””>

<label for=”dropdown1″>Label One:</label>

<?php createDropdown($colors, ‘dropdown1’); ?>

<input type=”submit” name=”submit” value=”GO!” />

<?php

if ($_SERVER[ ‘REQUEST_METHOD’] == ‘POST’

&& $_POST[‘submit’] == ‘GO!’ ) {

$post = $_POST[‘dropdown1’];

echo $post;

}

?>

</form>

 

There is just one last thing we should do to clean up our code a bit and make it easier to use. We are going to cut our array from form.php and paste it into dropdown.php. There is a good reason for this – if we want to add/delete/modify colors in our array we can do so in one spot. If the menu is on multiple pages, maintenance becomes faster, menus are consistent and mistakes are much less likely and easier to fix. We can also add arrays to dropdown.php and reuse our function to create menus with different data.

 

Markup for form.php

 

<?php include_once ‘dropdown.php’; ?>

<form id=”form1″ name=”form1″ method=”post” action=””>

<label for=”dropdown1″>Label One:</label>

<?php createDropdown($colors, ‘dropdown1’); ?>

<input type=”submit” name=”submit” value=”GO!” />

</form>

<?php

if ($_SERVER[ ‘REQUEST_METHOD’] == ‘POST’

&& $_POST[‘submit’] == ‘GO!’ ) {

$post = $_POST[‘dropdown1’];

echo $post;

}

?>

 

Code for our dropdown.php file 

 

<?php

$colors = array (

‘#FF0000’ => ‘red’,

‘#000000’ => ‘black’,

‘#0000FF’ => ‘blue’,

‘#00FF00’ => ‘green’,

‘#FFFF00’ => ‘yellow’

);

function createdropDown ($arr, $frm) {

echo ‘<select name=”‘.$frm.'” id=”‘.$frm.'”>’;

echo ‘<option value=””>Select one…</option>’;

foreach ($arr as $key => $value) {

echo ‘<option value=”‘.$key.'” >’.$value.'</option>’;

}

echo ‘</select>’;

}

?>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *