Loading List box Dynamically

We have seen the various type of HTML form elements while discussing about 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, user is limited to select the value with in these list of elements populated.

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

php_load_listbox

Loading List box with Static Data

For adding these values in static manner, each and every item of 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 a 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 limited set of items for a list box, this method of loading static data will be useful. Rather, for entering huge list of options to a HTML list box, it is too tough to hard code. So, the dynamic loading method is used, that 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 see couple of examples to learn how to load list box data from an array and from a database tables.

Adding List box item from an array

For that, the following program is starts with an PHP script for initializing an array which contains set of elements to be added into a HTML list box. Then, we need to iterate this array, for getting 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, array variable named as $toy_cars is initialized with the set of toy cars categories. The length of this PHP array is calculated and used for setting limit for the PHP loop for iterating over this source array.

Loading List box from MySQL

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

<?php
$conn = mysql_connect("localhost","root","");
mysql_select_db("phppot_examples",$conn); 
$result = mysql_query("SELECT * FROM tblcountry");
?>
<select name="dynamic_data">
<?php
$i=0;
while($row = mysql_fetch_array($result)) {
?>
<option value="<?=$row["country_name"];?>"><?=$row["country_name"];?></option>
<?php
$i++;
}
?>
</select>
<?php
mysql_close($conn);
?>

Before executing the above program, first we need to create required database and table having list of countries to be populated into the HTML list box. After that, we need to connect server and select appropriate database. And then, using MySQL select query, we can retrieve 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 in to the list box on clicking the down arrow.

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

This PHP code tutorial was published on July 12, 2013.

↑ Back to Top