A Better Way? / Creating dropdown menu

duckduckgoose

I should preface this by saying, the method below does work, but it's so ugly. There's just got to be a better way...

Essentially, I have a table that looks something like this (the __ has been inserted to try and make it more readable):

ID _ Type __ Object

1 __________ Fruit _______ Apple
2 _______ Fruit _______ Orange
3 _______ Fruit _______ Banana
4 _______ Vegetable __ Zucchini
5 _______ Vegetable __ Broccoli
6 _______ Starch _____ Pasta
7 _______ Starch ________ Rice

What I want to do is to create a dropdown menu where the object is indented beneath the type, like this:

Fruit
Apple
Orange
Banana
Vegetable
Zucchini
Broccoli
Starch
Pasta
___Bread

The "types" (i.e., Fruit, Vegetable, Starch) need to be selectable, so I don't want to use <optgrouplabel>.

I came up with the following, but, it's ugly and cumbersome. Anyone have a better way?

<select name="product">
<?

$query = "SELECT * FROM myTable ORDER BY Type ASC";
$result = mysql_query($query);

echo "<option value=\"\" selected>- Select One -</option>\n";

$option1 = "<option value=\"Fruit\">Fruit</option>";
$option2 = "<option value=\"Vegetable\">Vegetable</option>";
$option3 = "<option value=\"Starch\">Starch</option>";

while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {

$typeName = $row['Type'];
$objectName = $row['Object'];

if($typeName == 'Fruit') {

if($objectName == $_GET['o']) {

	$option1 .= "<option value=\"$objectName\" selected>$objectName</option>";

} else {

	$option1 .= "<option value=\"$objectName\">$objectName</option>";
}
}


if($typeName == 'Vegetable') {
	if($objectName == $_GET['o']) {

	$option2.= "<option value=\"$objectName\" selected>$objectName</option>";

} else {

	$option2 .= "<option value=\"$objectName\">$objectName</option>";
}
}

if($typeName == 'Starch') {

if($objectName == $_GET['o']) {

	$option3 .= "<option value=\"$objectName\" selected>$objectName</option>";

} else {

	$option3 .= "<option value=\"$objectName\">$objectName</option>";
}
}

            echo $option1;
            echo $option2;
            echo $option3;
?>
                </select>

bogu

Something like this?

$sql = "SELECT * FROM `table` ORDER BY `Type`";
$rez = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($rez)) {
	$grocery = array();
	while ($rows = mysql_fetch_assoc($rez)) {
		$grocery[$rows['Type']] = $rows['Object'];
	}
} mysql_free_result($rez);

if (!empty($grocery)) {
	echo "<select>"; $tmp = '';
	foreach ($grocery as $key=>$value) {
		if ($tmp != $key) {
			echo "<option value=\"{$key}\">{$key}</option>";
		}
		echo "<option value=\"{$value}\">&nbsp;&nbsp;&nbsp;{$value}</option>";
		$tmp = $key;
	}
	echo "</select>";
}

this code is not tested, but u should get the idea ...

Weedpacket

To distinguish them, you might consider using CSS, as suggested below. Warning: it seems that applying styles to <option> elements is one of the more unusual things to do: in the example, IE will apply the background colour, but not the indent or font weight. But Firefox doesn't apply the appropriate style to the selected element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
</head>
<style type="text/css">
<!--
.foodtype{font-weight:bold;background-color:#fedcba}
.food{margin-left:2em;}
-->
</style>
<body>
<select>
<option class="foodtype">Fruit</option>
<option class="food">Apple</option>
<option class="food">Orange</option>
<option class="food">Banana</option>
<option class="foodtype">Vegetable</option>
<option class="food">Zucchini</option>
<option class="food">Broccoli</option>
<option class="foodtype">Starch</option>
<option class="food">Pasta</option>
<option class="food">Bread</option>
</select>
</body>
</html>