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.
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
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.
thank u
Regarding Loading List box from MySQL example.
How would I submit user selection to a second php script using post method from a form.
Meaning add a submit button to your example and retrieving the selection in second php script.
Thank you for your efforts
Thank you, Rick.
I have written about how to submit form inputs to second PHP script in this article.
https://phppot.com/php/access-form-data-from-php/
i tried it , but the listbox is showing no data when i execute the html file . I m using data from a already existing table .
You save this file with .html or .php extension?
how to get the option tag values dynamically ?????????
While submitting this form, from PHP page we can use
$_GET[“dynamic_data”], $_POST[“dynamic_data”] to get select box values dynamically.
Thank you, this is just what I needed.
vincy good code, but in your code there is no need to use variable $i, plz check it out
thank you
Welcome Issara.
Thanks
Welcome Alexa.
oh my god thanks a lot dear. i spend a whole day and frustrated to overcome this. thanks a lot dear
Welcome Nandhini.