如何实现基于两个select输入动态改变div（colorbox）的背景色？

需求：创建一个id为colorbox的div，其背景色由两个select控件（soil_colour1控制明度、soil_colour2控制色相）的选择值共同决定。

现有HTML代码 #

<select name="soil_colour" id="soil_colour1">
    <option value="dark">Dark</option>
    <option value="medium">Medium</option>
    <option value="light">Light</option>
    <option value="pale">Pale</option>
</select>
<select name="soil_colour" id="soil_colour2">
    <option value="grey">Grey</option>
    <option value="purple">Purple</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="brown">Brown</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
</select>

<div id="colorbox" style="background-color: #FFFFFF7F; padding: 10px; border: 1px solid #ccc; width: 23%; height: 80px;"></div>

原脚本存在的问题 #

• 条件判断用了赋值运算符=而非比较运算符==/===，逻辑错误
• JS中DOM样式属性需用驼峰命名：background-color应改为backgroundColor
• 仅处理了dark+grey一种组合，未覆盖所有选择情况
• 未绑定触发事件，选择变化时不会自动执行函数

完整解决方案 #

用颜色映射表管理所有明度+色相的组合，代码更简洁易维护，同时绑定选择器的change事件实现实时更新：

<select name="soil_colour" id="soil_colour1" onchange="findColor()">
    <option value="dark">Dark</option>
    <option value="medium">Medium</option>
    <option value="light">Light</option>
    <option value="pale">Pale</option>
</select>
<select name="soil_colour" id="soil_colour2" onchange="findColor()">
    <option value="grey">Grey</option>
    <option value="purple">Purple</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="brown">Brown</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
</select>

<div id="colorbox" style="background-color: #4F4E50; padding: 10px; border: 1px solid #ccc; width: 23%; height: 80px;"></div>

<script>
// 定义所有明度+色相对应的颜色值，可根据需求调整
const colorMap = {
    dark: {
        grey: '#4F4E50',
        purple: '#4A3C6E',
        blue: '#2D3E50',
        green: '#2D4A3C',
        brown: '#5D4037',
        orange: '#795548',
        yellow: '#8D6E63',
        red: '#6D4C41'
    },
    medium: {
        grey: '#9E9E9E',
        purple: '#7986CB',
        blue: '#607D8B',
        green: '#66BB6A',
        brown: '#A1887F',
        orange: '#FFB74D',
        yellow: '#FFEE58',
        red: '#EF5350'
    },
    light: {
        grey: '#E0E0E0',
        purple: '#C5CAE9',
        blue: '#B0BEC5',
        green: '#A5D6A7',
        brown: '#D7CCC8',
        orange: '#FFCC80',
        yellow: '#FFF9C4',
        red: '#FFCDD2'
    },
    pale: {
        grey: '#F5F5F5',
        purple: '#E8EAF6',
        blue: '#ECEFF1',
        green: '#E8F5E9',
        brown: '#F5F0E1',
        orange: '#FFF3E0',
        yellow: '#FFFDE7',
        red: '#FFEBEE'
    }
};

function findColor() {
    const lightness = document.getElementById('soil_colour1').value;
    const hue = document.getElementById('soil_colour2').value;
    const colorBox = document.getElementById('colorbox');
    // 从映射表获取对应颜色，默认返回初始色
    colorBox.style.backgroundColor = colorMap[lightness][hue] || '#FFFFFF7F';
}

// 页面加载时初始化颜色
window.onload = findColor;
</script>

说明 #

• 给两个select添加了onchange="findColor()"，选择变化时自动更新背景色
• 用colorMap对象统一管理所有颜色组合，后续修改或添加颜色只需更新映射表
• 修复了JS样式属性的命名问题，使用驼峰式backgroundColor
• 页面加载完成后自动执行一次findColor()，设置初始选择对应的颜色

内容的提问来源于stack exchange，提问作者Miko Efa