- Option Group
- Preselecting an option in a list box
- How to get multiple selected values of the select box?
- Preselecting multiple selection lists
<select>
The select dropdown helps you to save space in the form by displaying a single option, rather than the whole list. A dropdown select box is created by a <select>
tag, and each individual item within that list is created using an <option>
tag.
The normal syntax for a <select>
menu (also called list box) is as follows:
<select name="category"> <option>PHP</option> <option>ASP</option> </select>
Multiple attribute:
The multiple
attribute in the <select>
tag allows the user to select more than one option:
<select name="categories" multiple> <option>PHP</option> <option selected>MySQL</option> <option value="JS">JavaScript</option> <option selected>ASP</option> </select>
<option>
Value Attribute:
When you submit the form, the value of the selected option sends to the server. A browser first tries to find the value attribute within the selected option, if it is not found the browser sends the text found between the option’s opening and closing tags as the value:
Value: PHP <option>PHP</option> Value: 9 <option value="9">PHP</option>
Example: value attribute
<select name="category"> <option value="1">PHP</option> <option value="2">ASP</option> </select>
Disabled attribute
If you write disabled
in an option tag, the option cannot be selectable, and not sent to the server on form submission:
<select name="category"> <option value="1" disabled>PHP</option> <option value="2">ASP</option> </select>
Selected Attribute:
Use the “selected
” attribute to preselect an option in the select box, in the following example the ASP
option will be pre-selected when you open the form:
<select name="category"> <option>PHP</option> <option selected>ASP</option> </select>
<optgroup>
Use this tag to group options within a selection menu in order to provide a more structured layout in a long list of options:
<select name="category"> <optgroup label="Numeric"> <option>100</option> <option>200</option> <option>300</option> </optgroup> <optgroup label="Alphabet"> <option>One</option> <option>Two</option> <option>Three</option> </optgroup> </select>
The syntax is straightforward, use the label attribute to name the group i.e. <optgroup label="name">
, and add options that should be within that group.
Select Options Group Example:
Note: Disabling an option group will disable all options within the group.
<select name="category"> <optgroup label="Numeric" disabled> <option>100</option> <option>200</option> <option>300</option> </optgroup> <optgroup label="Alphabet"> <option>One</option> <option disabled>Two</option> <option>Three</option> </optgroup> </select>
Demo: Disable an Option Group Example:
PHP – Preselecting an option in a list box
<option <?php if (isset($_POST['listname']) && $_POST['listname'] == 'PHP') { echo 'selected'; } ?> >PHP</option>
On a single selection list, the value
of the selected <option>
element is transferred to the server when submitting the form. This value can then be manually checked to prefill the form, using the selected
HTML attribute, as shown in the code.
Prefilling Selection Lists:
<?php $sel = isset($_POST['listname']) ?? ''; ?> <form method="post" action="example.php"> <select name="category"> <option <?= $sel == 'PHP' ? 'selected' : '' ?> >PHP</option> <option <?= $sel == 'ASP' ? 'selected' : '' ?> >ASP</option> <option <?= $sel == 'MySQL' ? 'selected' : '' ?> >MySQL</option> </select> </form>
How to get multiple selected values of select box?
If you want PHP to treat a form field as an array of string, just add square brackets to the name of the form field, for example:
<selec name="categories[]"> </select>
For PHP 7.0.0 or above use the following code to retrieve the selected items:
<?php //PHP 7.0.0 or above $cats = $_POST['categories'] ?? []; foreach ($cats as $cat) echo htmlspecialchars ($cat).'<br>';
Prior to PHP 7.0.0 use the following code:
<?php $cats = isset($_POST['categories']) ? $_POST['categories'] : []; foreach ($cats as $cat) echo htmlspecialchars($cat).'<br>';
Example: Process multiple selected values of the select box
<?php $cats = $_POST['categories'] ?? []; foreach ($cats as $cat) echo htmlspecialchars($cat).'<br>'; ?> <form method="post" action="example.php"> <select name="categories[]" multiple="multiple" size="4"> <option>PHP</option> <option>ASP</option> <option>JSP</option> <option>CSS</option> </select> <p><input type="submit" value="submit" name="submit"></p> </form>
PHP – Preselecting Multiple Selection Lists
if (isset($_POST['lstnm']) && in_array('php', $_POST['lstnm'])) { echo 'selected'; }
When it comes to prefilling form elements, multiple selection lists are the most difficult ones to implement. This is because in $_GET
or $_POST
, you have an array of chosen options; so you cannot just compare strings, but you have to search for the specified value in the array. Luckily, PHP offers something suitable in the form of the in_array()
function. So, the effort required is not much more than with the other form elements: If the current value is in $_GET
/$_POST
, print out the selected
attribute.
Prefilling Multiple Selection Lists
<?php $lst = $_POST['mlst'] ?? []; ?> <form method="post" action="example.php"> <select name="mlst[]" multiple="multiple" size="4"> <option <?= in_array('PHP',$lst) ? 'selected' : '' ?> >PHP</option> <option <?= in_array('ASP',$lst) ? 'selected' : '' ?> >ASP</option> <option <?= in_array('JSP',$lst) ? 'selected' : '' ?> >JSP</option> <option <?= in_array('CSS',$lst) ? 'selected' : '' ?> >CSS</option> </select> <p><input type="submit" value="submit" name="submit"></p> </form>
However, the HTML form must be specially prepared to allow PHP to access the data from the multiple selection list: The value of the name
attribute has to end with []
, hinting to PHP that it should expect an array of values, not just a string value. Accessing the list data, however, can still be done using $_POST['listname']
and not $_POST['listname[]']
, as shown in the preceding code.
Processing Forms in PHP: