TamWiki » Nested Options In Select

(redirected from Main.NestedOptionsInSelect)

On this page... (hide)

Creating nested options via PHP

From a recent php-general mailing list entry, someone was wondering how to set up a select block if you have nested items to select from. The way to do this is with the <optgroup> tag, which, as the name suggests, groups sets of options:

<p>A selection widget about cars. Notice groupings.</p>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

raw code

Unselected: Attach:ex1unselected.png Δ
Drop Down Enabled: Attach:ex1dropdown.png Δ

As you can see above, there are two groups, "Swedish Cars" and "German Cars" with different options inside of them.

You can put optgroups inside of optgroups for further nesting:

<p>Another selection widget about cars. Notice the nested groupings</p>
<select>
<optgroup label="Swedish Cars">
<optgroup label=" Volvo">
<option value="240s">240 Sedan</option>
<option value="240w">240 Wagon</option>
<option value="740s">740 Sedan</option>
<option value="740w">740 Wagon</option>
</optgroup>
<optgroup label=" Saab">
<option value="900s">900s</option>
</optgroup>
</optgroup>
<optgroup label="German Cars">
<optgroup label=" Mercedes">
<option value="300SD">300SD</option>
<option value="S350">S350</option>
<option value="400SE">400SE</option>
<option value="500SEL">500SEL</option>
<option value="600SEL">600SEL</option>
</optgroup>
<optgroup label=" Audi">
<option value="2011TTSCoupe">2011 TTS Coupe</option>
<option value="2011TTSRoadster">2011 TTS Roadster</option>
<option value="S5Coupe">S5 Coupe</option>
<option value="S5Cabriolet">S5 Cabriolet</option>
<option value="S6Sedan">S6 Sedan</option>
</optgroup>
</optgroup>
</select>

raw code

Notice the use of the   in the example above to set off the supgroupings a little from the parent.

Unselected: Attach:ex2unselected.png Δ
Drop Down Enabled: Attach:ex2dropdown.png Δ

Demo page

Creating nested options via PHP

This should be drop dead easy, but I'll include an example anyway.

<?php
$categories[] = array('id' => 1, 'name' => 'cars');
$categories[] = array('id' => 2, 'name' => 'trucks');
$categories[] = array('id' => 3, 'name' => 'motorcycles');
$pages[] = array('id' => 1, 'name' => 'Neon', 'cat_id' => 1);
$pages[] = array('id' => 2, 'name' => 'Saturn', 'cat_id' => 1);
$pages[] = array('id' => 3, 'name' => 'F150', 'cat_id' => 2);
$pages[] = array('id' => 4, 'name' => 'Ram 2500', 'cat_id' => 2);
$pages[] = array('id' => 5, 'name' => 'Suzuki', 'cat_id' => 2);
$pages[] = array('id' => 6, 'name' => 'Honda', 'cat_id' => 3);
echo "<select id=\"page_id\">\n";
foreach ($categories AS $cat) {
$c_cat_name = htmlspecialchars($cat['name']);
echo "\t<optgroup label=\"{$c_cat_name}\">\n";
foreach ($pages AS $page) {
if ( $page['cat_id'] == $cat['id'] ) {
$c_page_id = htmlspecialchars((int)$page['id']);
$c_page_name = htmlspecialchars($page['name']);
echo "\t\t<option value=\"{$c_page_id}\">{$c_page_name}</option>\n";
}
}
# Reset pages so you can loop through it again
reset($pages);
echo "\t</optgroup>\n";
}
echo "</select>\n";
?>

raw code

Which returns the following HTML:

<select id="page_id">
<optgroup label="cars">
<option value="1">Neon</option>
<option value="2">Saturn</option>
</optgroup>
<optgroup label="trucks">
<option value="3">F150</option>
<option value="4">Ram 2500</option>
<option value="5">Suzuki</option>
</optgroup>
<optgroup label="motorcycles">
<option value="6">Honda</option>
</optgroup>
</select>

raw code

Demo

Tags:

html

Categories: Articles

Recent Changes | Printable View | Page History | Edit Page
Page last modified on April 17, 2012, at 08:59 PM by ImportText ?