PHP 陣列動態產生 HTML 下拉選單

PHP 陣列動態產生 HTML 下拉選單

將 PHP 陣列資料綁定到 <select> 下拉選單是表單開發基本功。本文示範使用物件陣列搭配 foreach 迴圈輸出 <option>，並配合 JavaScript 即時取得選取值。

完整範例

<?php
$data = [
    (object)['titulo' => 'Ford',     'valor' => 'opcion1'],
    (object)['titulo' => 'Peugeot',  'valor' => 'opcion2'],
    (object)['titulo' => 'Chevrolet','valor' => 'opcion3'],
    (object)['titulo' => 'Volkswagen','valor' => 'opcion4'],
];
?>
<!DOCTYPE html>
<html>
<head>
    <script>
    function onCambioDeOpcion(select) {
        const txt = select.options[select.selectedIndex].text;
        const val = select.value;
        alert(`選擇了: ${txt}\n值為: ${val}`);
    }
    </script>
</head>
<body>
    <select name="autor" onchange="onCambioDeOpcion(this)">
        <option value="" selected disabled>請選擇廠商</option>
        <?php foreach ($data as $item): ?>
            <option value="<?= htmlspecialchars($item->valor) ?>">
                <?= htmlspecialchars($item->titulo) ?>
            </option>
        <?php endforeach; ?>
    </select>
</body>
</html>

重點提醒

• 使用 htmlspecialchars() 防止 XSS 攻擊。
• 資料來源可為資料庫查詢結果（PDO::FETCH_OBJ）、API 回傳 JSON 解碼等。
• <option value="" disabled selected> 提供友善預設提示。