How To Create a Dynamic Dropdown List With PHP

In this guide I will share how to create a dynamic dropdown select list in PHP. It will be aimed at beginners, and a great reference point.

The Code

The great thing with PHP is you can mix and match HTML with PHP. Let PHP handle the data side of things, and create HTML elements leveraging a foreach loop to create a dynamic list.

<?php
$list_values = [ 'cat', 'dog', 'fish' ]; // An array of values to loop through.
?>
    <select name="my-animals" id="my-animals">
<?php
    // This is where the magic happens, loop through an array of data and build the options
    foreach( $list_values as $animal ) {
        echo "<option value='" . $animal . "'>" . $animal . "</option>";
    }
?>
    </select>
<?php

The above code is a primer to create a basic multiple option list within PHP as a reference/starting point. The key components here are using an array and a foreach loop. While you can echo out the HTML I do like to close the <?php ?> when outputting a lot of HTML elements – but you can totally echo this out.

Bonus: A WordPress Dynamic Dropdown List Example

I was working through a list option, that remembers what the user had selected from the database. This example will show you how to retrieve the data and upon displaying the list remember what the user had selected. It won’t cover saving the data as this depends on the solution or context you’re using the list on.

Reference: Using selected method that WordPress provides to remember the selected option upon page load – https://developer.wordpress.org/reference/functions/selected/

For this code, I will assume that you stored data in the options table and are familiar with how WordPress functions/storing data works.

<?php
$list_values = [ 'cat', 'dog', 'fish' ]; // An array of values to loop through.
$favorite_animal = get_option( 'my_favorite_animal', true ); // The stored single value we reference.
?>
    <select name="my-animals" id="my-animals">
<?php
    // This is where the magic happens, loop through an array of data and build the options
    foreach( $list_values as $animal ) {
        echo "<option value='" . esc_attr( $animal ) . "' " . selected( $favorite_animal, $animal, false ). ">" . esc_html( $animal ) . "</option>";
    }
?>
    </select>
<?php

The $favorite_animal variable is the stored option from the database, which we load when generating the form or dropdown list. While we’re outputting our values through to the browser, we leverage the selected function WordPress provides which cross-references the value of each $animal with the value from our $favorite_animal and then adds the attribute selected to the option when it’s rendered. The third parameter of selected, is should the function echo out the value or not – this is not needed as we’re already echoing out the HTML element in the beginning of the line.

The esc_attr and esc_html are sanitization functions to help ensure there’s no weird or “sus” output. A guide regarding this to follow later on.

Hopefully this helps get you started, I’m sharing these code snippets and other articles as I come across things that I find useful to reference myself at a later stage. If you have any questions, drop a comment below or checkout my other WordPress posts! Cheers!

Photo by Glenn Carstens-Peters on Unsplash