Tal vez te convenga incluir el orden en que deseas que se obtengan los datos de la consulta, ya sea por categoría, nombre de plato, precio o como lo tengas definido en tu proyecto.
Un formato de arreglo que puede ser útil es:
[
"Categoría 1" => [
1 => ["Plato 1", "100"], // ID de plato => [Nombre, Precio]
2 => ["Plato 2", "120"],
3 => ["Plato 3", "150"],
],
"Categoría 2" => [
3 => ["Plato 3", "80"],
4 => ["Plato 4", "75"],
5 => ["Plato 5", "110"],
],
]
La representación del arreglo es ya con la estructura que necesitas para armar el select y no es tan complicado obtenerlo:
// Crear arreglo de todos los platos
$platos = [];
while($row = $funcion_para_extraer_datos($consulta)) {
// Verificar que existe la categoría:
if(!isset($platos[$row['cat_nombre']])) {
// Agregar categoría como arreglo vacío
$platos[$row['cat_nombre']] = [];
}
// Agregar plato en la categoría correspondiente
$platos[$row['cat_nombre']][$row['id_plato']] = [$row['nombre'], $row['precio']];
}
Para generar el select:
<select name="platos">
<option value="">-- Selecciona --</option>
<?php
// Recorrer categorías
foreach($platos as $cat => $catPlatos) {
// Crear grupo
echo "<optgroup label=\"$cat\">\n";
// Recorrer platos en la categoría
foreach($catPlatos as $id => $plato) {
// Agregar precio en dataset,
// por si necesitas usarlo para realizar cálculos
echo "<option value=\"$id\" data-precio=\"{$plato[1]}\">{$plato[0]}</option>\n";
}
// Cerrar grupo
echo "</optgroup>";
}
?>
</select>
Resultado y un poco de javascript agregado para mostrar para qué puede servir tener el precio en cada opción:
// Puedes obtener el precio muy fácil
// Escuchar evento onchange del select
document.querySelector('[name="platos"]').addEventListener('change', function() {
// selectedIndex es el índice de la opción seleccionada
let index = this.selectedIndex;
// Obtener opción actual por índice
let opc = this.options[index];
// Verificar que tiene valor
if(opc.value) {
// ID de plato es el valor de la opción
let platoId = opc.value;
// Nombre es el texto de la opción
let platoNombre = opc.text;
// Precio está en atributo de datos
let platoPrecio = opc.dataset.precio;
// Ver todos los datos en consola
console.log(platoId, platoNombre, platoPrecio);
}
});
<select name="platos">
<option value="">-- Selecciona --</option>
<optgroup label="Categoría 1">
<option value="1" data-precio="100">Plato 1</option>
<option value="2" data-precio="120">Plato 2</option>
<option value="3" data-precio="150">Plato 3</option>
</optgroup><optgroup label="Categoría 2">
<option value="3" data-precio="80">Plato 3</option>
<option value="4" data-precio="75">Plato 4</option>
<option value="5" data-precio="110">Plato 5</option>
</optgroup></select>
Probablemente me extendí y me salí un poco del tema de la pregunta, pero creo que esta información te puede ser útil para realizar acciones dentro de la página sin tener que recargar.