JS-如何根据if语句更改选项颜色

要根据 if 语句更改选项颜色，你可以使用 JavaScript 来操作 DOM 元素的样式。以下是一个简单的示例，展示了如何根据条件更改选项的颜色。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Option Color</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <select id="mySelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <button onclick="changeColor()">Change Color</button>

    <script>
        function changeColor() {
            const selectElement = document.getElementById('mySelect');
            const selectedOption = selectElement.options[selectElement.selectedIndex];

            if (selectedOption.value === '2') {
                selectedOption.classList.add('highlight');
            } else {
                selectedOption.classList.remove('highlight');
            }
        }
    </script>
</body>
</html>

解释

HTML 结构:
- 创建一个 <select> 元素，并添加几个 <option> 子元素。
- 添加一个按钮，用于触发颜色更改。

CSS 样式:
- 定义一个 .highlight 类，用于设置高亮颜色（例如红色）。
JavaScript 逻辑:
- 获取 <select> 元素。
- 获取当前选中的 <option> 元素。
- 使用 if 语句检查选中选项的值。
- 如果选中选项的值为 '2'，则添加 .highlight 类以更改颜色；否则，移除该类以恢复默认颜色。