[PHP – MySQL] Mostrar datos dinámicos en un combobox

Hola.

Vamos a ver cómo mostrar datos dinámicos en un campo <select> utilizando PHP y MySQL.

El ejemplo es bastante sencillo, pero es una situación que nos podemos encontrar constantemente cuando estamos desarrollando una aplicación.

Imaginemos el siguiente escenario:

Tenemos un formulario para editar un producto que ya hemos introducido previamente en nuestra base de datos.

Entre los datos del producto se encuentra su categoría.

En lugar de obligar al usuario a escribir manualmente la categoría, vamos a crear un desplegable que muestre:

• La categoría que tiene actualmente asignada el producto.
• El resto de categorías disponibles.

De esta forma, el usuario puede modificar la categoría cómodamente seleccionando una opción del desplegable.

---

La estructura de nuestra aplicación

Para este ejemplo vamos a suponer que tenemos dos tablas:

• productos
• categorias

El producto tendrá almacenado el identificador de la categoría a la que pertenece.

Por ejemplo, podríamos tener algo parecido a esto:

productos
-------------------------
id
nombre
id_categoria

categorias
-------------------------
id
nombre

Cuando cargamos el formulario de edición, tendremos dos datos importantes:

• $cats: contiene las categorías disponibles.
• $idTipo: contiene el identificador de la categoría actual del producto.

Por ejemplo, podríamos recibir las categorías con una estructura similar a:

$cats = [
    [1, 'Informática'],
    [2, 'Telefonía'],
    [3, 'Electrodomésticos'],
    [4, 'Accesorios']
];

$idTipo = 2;

En este caso, el producto pertenece actualmente a la categoría Telefonía.

---

La primera versión

Una primera aproximación podría consistir en recorrer las categorías con un foreach y comprobar cuál coincide con la categoría actual del producto.

El código original que utilizaba para resolverlo era similar a este:

<div class="form-group">

    <label>Categoría a la que pertenece el producto:</label>

    <select name="tipoProducto">

        <?php

        foreach ($cats as $curr) {

            $idCategoria = $curr[0];
            $categoria   = $curr[1];

        ?>

            <option value="<?php echo $idCategoria; ?>"
                <?php

                if ($idCategoria === $idTipo) {

                    echo 'selected="selected"';

                }

                ?>
            >

                <?php echo $categoria; ?>

            </option>

        <?php

        }

        ?>

    </select>

</div>

La idea es correcta: recorrer las categorías y añadir el atributo selected cuando encontramos la categoría que corresponde al producto.

Sin embargo, podemos escribirlo de una forma bastante más limpia y segura.

---

Una versión más limpia

Vamos a separar un poco mejor el HTML del PHP y, además, vamos a escapar correctamente los valores que estamos mostrando en el HTML.

<div class="form-group">

    <label for="tipoProducto">
        Categoría a la que pertenece el producto:
    </label>

    <?php if (empty($cats)): ?>

        <p class="text-warning">
            No hay categorías disponibles.
        </p>

    <?php else: ?>

        <select name="tipoProducto" id="tipoProducto">

            <?php foreach ($cats as $curr): ?>

                <?php

                $idCategoria = $curr[0];
                $categoria   = $curr[1];

                $selected = ((string) $idCategoria === (string) $idTipo)
                    ? 'selected'
                    : '';

                ?>

                <option
                    value="<?php echo htmlspecialchars($idCategoria, ENT_QUOTES, 'UTF-8'); ?>"
                    <?php echo $selected; ?>
                >
                    <?php echo htmlspecialchars($categoria, ENT_QUOTES, 'UTF-8'); ?>
                </option>

            <?php endforeach; ?>

        </select>

    <?php endif; ?>

</div>

---

La parte importante: selected

La clave de todo el ejemplo está realmente aquí:

$selected = ((string) $idCategoria === (string) $idTipo)
    ? 'selected'
    : '';

Estamos comparando el identificador de la categoría que estamos recorriendo con el identificador que tiene actualmente el producto.

Si coinciden, generamos:

<option value="2" selected>Telefonía</option>

Si no coinciden, simplemente generamos:

<option value="3">Electrodomésticos</option>

De esta forma, cuando el navegador muestra el formulario, la categoría actual aparece seleccionada automáticamente.

---

¿Por qué hacemos la comparación como string?

Este pequeño detalle puede evitar algún que otro quebradero de cabeza.

Dependiendo de cómo obtengamos los datos desde MySQL, el identificador puede llegarnos como número o como cadena.

Podríamos tener:

$idCategoria = 2;
$idTipo = '2';

Con una comparación estricta:

$idCategoria === $idTipo;

los valores no serían iguales porque uno es un entero y el otro una cadena.

Por eso, en este ejemplo convertimos ambos valores a string antes de realizar la comparación:

(string) $idCategoria === (string) $idTipo

También podríamos normalizar ambos valores como enteros si sabemos que estamos trabajando exclusivamente con identificadores numéricos.

---

¿Y por qué utilizamos htmlspecialchars()?

Porque los datos procedentes de una base de datos no deberían imprimirse directamente en HTML sin escapar.

Por ejemplo:

echo $categoria;

es menos recomendable que:

echo htmlspecialchars(
    $categoria,
    ENT_QUOTES,
    'UTF-8'
);

La función convierte determinados caracteres especiales en entidades HTML y evita que un valor almacenado en la base de datos pueda interpretarse directamente como HTML.

---

El resultado final

Con este pequeño ejemplo conseguimos algo bastante habitual en cualquier aplicación CRUD:

• Obtenemos las categorías disponibles desde la base de datos.
• Recorremos esas categorías con PHP.
• Generamos dinámicamente las opciones del <select>.
• Identificamos la categoría actual del producto.
• La marcamos automáticamente como seleccionada.
• Mostramos los datos de forma segura en el HTML.

El usuario solamente verá un desplegable normal:

<select name="tipoProducto">

    <option value="1">Informática</option>

    <option value="2" selected>Telefonía</option>

    <option value="3">Electrodomésticos</option>

    <option value="4">Accesorios</option>

</select>

Pero por debajo estamos generando esas opciones dinámicamente a partir de los datos almacenados en MySQL.

---

En resumen

Los campos <select> dinámicos son una solución muy sencilla para mejorar los formularios de edición.

En lugar de obligar al usuario a introducir manualmente información que ya existe en nuestra base de datos, podemos ofrecerle las opciones disponibles y seleccionar automáticamente la que corresponde al registro que estamos editando.

Y con esto tendremos un campo desplegable que muestra las categorías disponibles y permite al usuario modificar cómodamente la categoría del producto.

Una cosa pequeña, pero que aparece constantemente cuando empezamos a construir aplicaciones que trabajan con bases de datos.

Un saludo.

Visitas: 12948