PHP Select Option (original) (raw)
Summary: in this tutorial, you will learn how to use the <select>
element to create a drop-down list and a list box and how to get the selected values from the <select>
element in PHP.
A quick introduction to the element #
The <select>
is an HTML element that provides a list of options. The following shows how to define a <select>
element in HTML:
<label for="color">Background Color:</label> <select name="color" id="color"> <option value="">--- Choose a color ---</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>
Code language: PHP (php)
The <select>
element has two important attributes:
id
– theid
associates the<select>
element with a<label>
elementname
– thename
attribute associates with the value for a form submission.
The <option>
element nested inside the <select>
element defines an option in the menu. Each option has a value
attribute. The value
attribute stores data submitted to the server when it is selected.
If an option doesn’t have the value
attribute, the value
attribute defaults to the text inside the <option>
element.
To select an option when the page loads for the first time, you can add the selected
attribute to the <option>
element.
The following example selects the Green
option when the page first loads:
<label for="color">Background Color:</label> <select name="color" id="color"> <option value="">--- Choose a color ---</option> <option value="red">Red</option> <option value="green" selected>Green</option> <option value="blue">Blue</option> </select>
Code language: PHP (php)
Getting the selected value from a element #
We’ll create a form that uses a <select>
element.
First, create the following folders and files:
├── css | └── style.css ├── inc | ├── footer.php | ├── get.php | ├── header.php | └── post.php └── index.php
Code language: PHP (php)
Second, place the following code in the header.php file:
`
PHP select optionThird, place the following code in the footer.php file:
`
Fourth, add the following code to the get.php file to create a form that has one <select>
element with a submit button:
`
The form uses the POST
method to submit data to the webserver.
Finally, add the following code to the post.php file:
`<?php
if(filter_has_var(INPUT_POST, 'color')) { color=htmlspecialchars(color = htmlspecialchars(color=htmlspecialchars(_POST['color']); } else { $color = null; } ?>
<p>You selected <span style="color:<?= <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi><mi>o</mi><mi>l</mi><mi>o</mi><mi>r</mi><mo stretchy="false">?</mo><mo>></mo><mi mathvariant="normal">"</mi><mo>></mo><mo><</mo><mo stretchy="false">?</mo><mo>=</mo></mrow><annotation encoding="application/x-tex">color ?>"><?= </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7335em;vertical-align:-0.0391em;"></span><span class="mord mathnormal">co</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal" style="margin-right:0.02778em;">or</span><span class="mclose">?</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">></span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.7335em;vertical-align:-0.0391em;"></span><span class="mord">"</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">><</span></span><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mclose">?</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span></span></span></span>color ?></span></p>
<p><a href="index.php">Back to the form</a></p>
<p>You did not select any color</p>
`Code language: PHP (php)
To get the selected value of the <select>
element, you use the $_POST
superglobal variable if the form method is POST
and $_GET
if the form method is GET
.
Alternatively, you can use the filter_input() function to sanitize the selected value.
If you select the first option of the <select>
element, the selected value will be empty. Otherwise, the selected value is red, green, or blue.
Select with multiple options #
To enable multiple selections, you add the multiple
attribute to the <select>
element:
<select name="colors[]" id="colors" multiple> ... </select>
Code language: PHP (php)
When you select multiple options of a <select>
element and submit the form, the name will contain multiple values rather than a single value. To get multiple selected values, you add the square brackets ([])
after the name of <select>
element.
Let’s take a look at an example of using a <select>
element with multiple selections.
First, create the following folders and files:
. ├── css | └── style.css ├── inc | ├── footer.php | ├── get.php | ├── header.php | └── post.php └── index.php
Code language: PHP (php)
Second, place the following code into the header.php file:
`
PHP ListboxThird, add the following code to the footer.php file:
`
Fourth, include the header.php
and footer.php
files in the index.php
:
`<?php
require DIR . '/inc/header.php'; requestmethod=strtoupper(request_method = strtoupper(requestmethod=strtoupper(_SERVER['REQUEST_METHOD']);
if ($request_method === 'GET') { require DIR . '/inc/get.php'; } elseif ($request_method === 'POST') { require DIR . '/inc/post.php'; }
require DIR . '/inc/footer.php';`Code language: PHP (php)
If the HTTP request is GET, the index.php file will show a form from the get.php file. When the form is submitted, the post.php file will handle the form submission.
Fifth, create a form that contains a <select>
element with the multiple
attribute in the get.php
file. The name of the <select>
element has an opening and closing square bracket []
so that PHP can create an array that holds the select values.
`
Finally, handle the form submission in the post.php
file:
`<?php
if (filter_has_var(INPUT_POST, 'colors')) {
selectedcolors=arraymap(′htmlspecialchars′,selected_colors = array_map('htmlspecialchars', selectedcolors=arraymap(′htmlspecialchars′,_POST['colors']); } else { $selected_colors = null; }
?>
<p>You selected the following colors:</p>
<ul>
<?php foreach ($selected_colors as $color) : ?>
<li style="color:<?= <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi><mi>o</mi><mi>l</mi><mi>o</mi><mi>r</mi><mo stretchy="false">?</mo><mo>></mo><mi mathvariant="normal">"</mi><mo>></mo><mo><</mo><mo stretchy="false">?</mo><mo>=</mo></mrow><annotation encoding="application/x-tex">color ?>"><?= </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7335em;vertical-align:-0.0391em;"></span><span class="mord mathnormal">co</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal" style="margin-right:0.02778em;">or</span><span class="mclose">?</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">></span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.7335em;vertical-align:-0.0391em;"></span><span class="mord">"</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">><</span></span><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mclose">?</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span></span></span></span>color ?></li>
<?php endforeach ?>
</ul>
<p>
</p>
<p>You did not select any color.</p>
Back to the form`Code language: PHP (php)
The post.php file uses the filter_has_var()
function to check if the colors variable exists in the POST request. If you select one or more colors, the post.php file will display them.
Summary #
- Use the
<select>
element to create a dropdown list. - Use the
multiple
attribute to create a list that allows multiple selections. - Use
$_POST
to get the selected value of the select element if the form method isPOST
(or$_GET
if the form method isGET
). - Add square brackets(
[]
) after the name of the<select>
element to get multiple selected values.
Did you find this tutorial useful?