Javascript 如何在选择选项上使用鼠标键和箭头键？

我想在这段代码中使用箭头键，如果我使用键更改选项，那么类应该添加到div中，背景颜色应该随着用户更改选项而更改

$（文档）.ready（函数（）{
$（'option'）。悬停（函数（）{
4.
$（'colr'）.removeAttr（'class'）；
$（'colr'）.attr（'class'，''）；
$（'#colr'）[0]。类名=''；
if（$（this）.val（）=='red'）{
$（'#colr'）.addClass（'red'）；
}else if（$（this）.val（）=='green'）{
$（'#colr'）.addClass（'green'）；
}else if（$（this）.val（）=='blue'）{
$（'#colr'）.addClass（'blue'）；
}否则{
$（'#colr'）.addClass（'black'）；
}
});
});
.red{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}

红色
绿色
蓝色
黑色
更改列表时需要调用函数

<select id="sel" onchange="jsFunc()">
    <option class="d" value="red">red</option>
    <option value="green" selected="selected">green</option>
    <option class="d" value="blue">blue</option>
    <option class="d" value="black">black</option>
</select>

<script>
    function jsFunc()
    {
       //do your stuff 
    }
</script>


红色
绿色
蓝色
黑色
函数jsFunc（）
{
//做你的事
}
首先尝试此操作：一旦代码发生更改，代码将正常工作。第二，代码中有一个未使用的
4
数字


$（文档）.ready（函数（）{
$（'#sel'）。on（'change'，function（）{
$（'colr'）.removeAttr（'class'）；
$（'colr'）.attr（'class'，''）；
$（'#colr'）[0]。类名=''；
if（$（this）.val（）=='red'）{
$（'#colr'）.addClass（'red'）；
}else if（$（this）.val（）=='green'）{
$（'#colr'）.addClass（'green'）；
}else if（$（this）.val（）=='blue'）{
$（'#colr'）.addClass（'blue'）；
}否则{
$（'#colr'）.addClass（'black'）；
}
});
});
.red{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}

Div
红色
绿色
蓝色
黑色
将select元素上的事件绑定为：

javascript:-

document.getElementById("id").onchange = function() {//your code that changes the background};

链接：-

jquery：-

$("#id").change(function() {//your code that changes the background});

链接：-
check keycode and eventlisteners doc当您使用鼠标单击或上下箭头键更改所选选项时，是否要更改背景？否我想在div中添加一个类，并且在我使用上下箭头键更改选项时应应用类的相关css-newInjava相同。我说的是功能。：）@科马尔