PHP 的 selected
選項本身不能直接自定義樣式。但是,你可以通過結合 HTML 和 JavaScript(或 jQuery)來實現自定義樣式的需求。
以下是一個簡單的示例,展示了如何在 PHP 中生成下拉菜單,并使用 JavaScript 為選定的選項添加自定義樣式:
dropdown.php
),并在其中生成下拉菜單:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
<style>
.selected {
background-color: #f1f1f1;
color: #333;
}
</style>
</head>
<body>
<select id="dropdown" onchange="updateSelectedStyle()">
<?php
$options = [
'Option 1' => 'option1',
'Option 2' => 'option2',
'Option 3' => 'option3',
];
foreach ($options as $value => $text) {
echo '<option value="' . htmlspecialchars($value) . '" ' . ($value == 'option2' ? 'selected' : '') . '>' . htmlspecialchars($text) . '</option>';
}
?>
</select>
<script>
function updateSelectedStyle() {
const dropdown = document.getElementById('dropdown');
const selectedOption = dropdown.options[dropdown.selectedIndex];
// Remove the 'selected' class from all options
for (let i = 0; i < dropdown.options.length; i++) {
dropdown.options[i].classList.remove('selected');
}
// Add the 'selected' class to the selected option
selectedOption.classList.add('selected');
}
</script>
</body>
</html>
在這個示例中,我們首先使用 PHP 生成一個包含三個選項的下拉菜單。然后,我們使用內聯樣式表定義了一個名為 .selected
的 CSS 類,用于設置選定選項的背景顏色和文本顏色。
接下來,我們使用 JavaScript 編寫一個名為 updateSelectedStyle
的函數,該函數在下拉菜單的選項發生變化時被調用。這個函數首先獲取當前選定的選項,然后從所有選項中刪除 selected
類,最后將 selected
類添加到選定的選項。
現在,當用戶選擇一個不同的選項時,選定的選項將自動應用自定義樣式。