Loading List box Dynamically

by Vincy. Last modified on July 3rd, 2022.

We have seen the various type of HTML form elements while discussing accessing form data. Among them, HTML list boxes which contains list of values are added by HTML <select> tags containing <option> tags for each entry. And, while interacting with the form, the user is limited to selecting the value within the list of elements populated.

Option tag includes value attribute to specify the value of each item, whereas, a caption is added in between <option></option> tags. The list box items will be added either statically or dynamically.

Loading List box with Static Data

For adding these values in a static manner, each and every item of the list box should be added by hard coding the caption and value by using HTML <option> tags. The example code for adding list boxes to an HTML form is as follows.

<select name="static_data">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

For having a limited set of items for a list box, this method of loading static data will be useful. Rather, for entering a huge list of options into an HTML list box, it is too tough to hard code. So, the dynamic loading method is used, which is discussed below in detail.

Loading List box Dynamically

For dynamic loading, the source of the items from where they are taken might be an array, database tables, and a file. In this article, we are going to see a couple of examples to learn how to load list box data from an array and from database tables.

Adding List box item from an array

For that, the following program starts with a PHP script for initializing an array that contains a set of elements to be added into an HTML list box. Then, we need to iterate this array, for having each element per iteration for adding options dynamically to the list box.

<?php
$toy_cars = array("Pull Back Cars","Remote Cars", "Electric Cars", "Toy Race Cars","Lightening Cars");
$array_length = count($toy_cars);
?>
<select name="dynamic_data">
<?php
for ($i=0;$i<$array_length;$i++){
?>
<option value="<?=$toy_cars[$i];?>"><?=$toy_cars[$i];?></option>
<?php
}
?>
</select>

In the above PHP program, the array variable named $toy_cars is initialized with the set of toy car categories. The length of this PHP array is calculated and used for setting a limit for the PHP loop for iterating over this source array.

Loading List box from MySQL

And then, let us have a glance at another code sample shown below to learn how to load the list box with MySQL data. So, we need to fulfill the requirements regarding the database which will be the source for getting a list of countries to be populated into a list box.

<?php
$conn = mysqli_connect("localhost", "root", "test", "blog_samples") or die("Connection Error: " . mysqli_error($conn));
$result = mysqli_query($conn, "SELECT * FROM tbl_country");
?>
<select name="dynamic_data">
<?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?=$row["country_name"];?>"><?=$row["country_name"];?></option>
<?php
$i++;
}
?>
</select>
<?php
mysqli_close($conn);
?>

Before executing the above program, first, we need to create the required database and table having a list of countries to be populated into the HTML list box. After that, we need to connect the server and select the appropriate database.

And then, using MySQL select query, we can retrieve an array of details for each row of the table tblcountry.

For each iteration, this process will be repeated, and an option tag is dynamically created by adding retrieved data to the caption and value of the list box item. After executing the above code, the list of country names will be populated into the list box by clicking the down arrow.

Note: While loading list box items dynamically, it will reduce the burden of hard coding each entry of the HTML list box by using option tags.

Download

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Comments to “Loading List box Dynamically”

Leave a Reply

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

↑ Back to Top

Share this page