Javascript 内联onchange脚本到外部JS

我有一个表单选择器元素，它有一个内联脚本，如下onchange所示：

<select onchange="this.className=this.options[this.selectedIndex].className">
     <option value="select">Select color</option>
     <option class="greenOpt" value="green" >Green</option>
    <option class="yellowOpt"   value="yellow" >Yellow</option>
    <option class="blueOpt" value="blue" >Blue</option>
</select>

但是我想把

onchange

脚本移到一个外部函数中，我不确定它应该是什么样子。我知道我需要在

标记中执行的操作是

onchange=“colorSel（）”

到目前为止，我的职能是：

function colorSel() {
  var colors = document.getElementById("colors");
  colors = this.className = this.options[this.selectedIndex].className;
  }

---

我被难住了。我已经将函数的参数和getElement类型更改为许多不同的内容。我就是不明白。

您需要为更改事件附加一个处理程序

document.getElementById（“颜色”）.addEventListener（'change'，function（）{
//你的逻辑是这样的
});
您尚未提供颜色元素的代码，因此我已经用您提供的内容演示了一些内容：


change=function（选择对象）{
selectObject.className=selectObject.options[selectObject.selectedIndex].className
}
.greenel{
背景颜色：绿色；
文本阴影：-1px 0白色，0 1px白色，1px 0白色，0-1px白色；
}
布鲁塞尔先生{
背景颜色：蓝色；
文本阴影：-1px 0白色，0 1px白色，1px 0白色，0-1px白色；
}
yellowSel先生{
背景颜色：黄色；
文本阴影：-1px 0白色，0 1px白色，1px 0白色，0-1px白色；
}

选择颜色
绿色
黄色的
蓝色
为什么要用类名指定颜色？在您最初的内联方法中，您没有这样做。这不是我的本意……我忘记按enter键将函数名移动到代码块中。@Abraxes-我已经发布了您问题的解决方案。谢谢您的想法，但这不是预期的结果。我正在尝试选择选项，以更改颜色。因此，在显示Apple now的地方，选项选择器中的背景是绿色的，“颜色”元素是select@我还是不明白你想要什么。您已将css类附加到所选项目。它们是干什么用的？你希望发生什么？选择某个选项时，该选项的背景颜色与单词匹配。因此，不是输出与颜色匹配的单词，而是选择器框中选定选项的背景。因此，我想知道如何在
select
标记中使用onchange调用函数，并将该函数放在我的外部JS文件中。您不需要将其留在那里。我很确定颜色一直都是错误的。我只是不知道如何使函数有效。谢谢你，这就是我想要找到的。
function colorSel() {
  var colors = document.getElementById("colors");
  colors = this.className = this.options[this.selectedIndex].className;
  }