Select Dropdown PHP foreach loop with 'optgroup' options
Question
I have a dropdown menu with a PHP 'foreach' that I loop through to populate the select options. This works well. However, what I'd like to do is have various sub labels using the "optgroup" option. In my returned array, I have a "type" of "blue", "green" and "red". How can I split the select options up into groups based on the $album['type']?
This is the code I have:
$query = mysql_query("SELECT * FROM background_albums);
$albums = array();
while($row = mysql_fetch_assoc($query)) {
array_push($albums, $row);
}
<select name="backgroundList" id="backgroundList">
<? foreach($albums as $album) { ?>
<option value="<?=($row['id']);?>"><?=$row['title'];?></option>
<? } ?>
</select>
This is the kind of thing I'd like to achieve within the foreach loop:
if ($album['type'] == 'green')...
<optgroup label="Green Backgrounds">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
if ($album['type'] == 'blue')...
<optgroup label="Blue Backgrounds">
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</optgroup>
Solution
Try
<select name="backgroundList" id="backgroundList">
<?php
$album_type = '';
foreach ($albums as $album) {
if ($album_type != $album['type']) {
if ($album_type != '') {
echo '</optgroup>';
}
echo '<optgroup label="'.ucfirst($album['type']).' Backgrounds">';
}
echo '<option value="'.$album['id'].'">'.htmlspecialchars($album['title']).'</option>';
$album_type = $album['type'];
}
if ($album_type != '') {
echo '</optgroup>';
}
?>
</select>
OTHER TIPS
After searching for loads of various posts online...then a great deal of trial and error, I finally found an optgroup solution that worked great.
This code is fairly similar to tagrin0, but I thought I'd provide this with a bit more comments to help the other noobs that might be wanting a clear picture of how to make this work without much fudging and interpretation with the code.
Hope it helps someone.
Here's the table structure...
opt_id | grp_id | optName | grpName | optAbbrv...
echo '<select id="xxx" class="xxx"> select">';
echo '<option >Select an instance...</option>';
$dbc = mysqli_connect('localhost','xxx','xxx','xxx') or die('Error connecting to MySQL server.');
// run your query, something like
// "SELECT <optgroup>_ID, <option>_ID, <optgroup>_Name, <ption>_Name FROM [mysql table this data is stored in] ORDER BY groupID, optionID"
$select = "SELECT * FROM ci_opt ORDER BY grp_id, opt_id";
$data = @mysqli_query($dbc, $select) or die(mysql_error());
// <optgroup> of the previous <option>
$previous = "";
// variable to set the first group
$first_group = true;
while($row = mysqli_fetch_array($data)) {
// if this <option> changed <optgroup> from the previous one,
// then add a new <optgroup>
if ($row['grpName'] != $previous) {
if (!$first_group) {
echo '</optgroup>';
} else {
$first_group = false;
}
echo '<optgroup label="' . $row['grpName'] . '">';
$previous = $row['grpName'];
}
// echo the current <option>
// Note: I've also prepared the [onclick] for linking the select to an event
echo '<option id="'. $row['optAbbrv'] .'" onclick="javascript:void()">' . ucwords($row['optName']) . '</option>';
}
// close the last <optgroup> tag
echo '</optgroup>';
// close the last <select> tag
echo '</select>';
// close the connection
mysqli_close($dbc);
// end php
Check if the type changed from the previous value, and then emit the appropriate tags.
Order the query by type:
$query = mysql_query("SELECT * FROM background_albums order by type"); //ordered query
[...]
$type = null;
foreach ($albums as $album) {
if ($album['type'] != $type) { // type changed
if ($type !== null) {
echo '</optgroup>'; // close previous optgroup
}
$type = $album['type'];
echo '<optgroup label="' . htmlspecialchars($type) . '">'; // start optgroup
}
[...]
}
echo '</optgroup>'; // close last optgroup
This method does not require sorting the array
<select>
<?php
<!-- getting the groups to be one unique array -->
$group= array_values(array_unique(array_column($album, 'type')));
for ($i=0; $i < count($group); $i++) : ?>
<!-- for N group print -->
<optgroup label="<?=$album[$i];?>">
<!-- loop trough the hole array to check if you belong to the group -->
<?php foreach ($album as $value): ?>
<!-- if you belong then we print -->
<?php if ($group_level[$i]==$value['type']): ?>
<option>
<?=$value['type'];?>
</option>
<?php endif ?>
<?php endforeach ?>
</optgroup>
<?php endfor ?>
</select>