使用javascript编写select元素脚本

我发现很难为HTMLSelect元素设置样式，甚至添加事件侦听器

预期行为 我想提醒选择选项的文本内容

这是HTML代码：

<select name="chooseSub" id="chooseSub" placeholder="Here we go">
  <option value="makeChoice" id="disabled">--Make a choice-- </option>
  <option value="ai" id="ai">Artificial Intelligence</option>
  <option value="angularJs" id="angularJs">AngularJs</option>
  <option value="css" id="css3">CSS3</option>
</select>

实际行为 它根本不起任何作用

你遇到这个了吗

var select=document.getElementById（'chooseSub'）；
select.addEventListener（'change'，函数（事件）{
警报（event.target.selectedOptions[0].text）；
});

--做出选择--
人工智能
安格拉斯
CSS3
你遇到这个了吗


var select=document.getElementById（'chooseSub'）；
select.addEventListener（'change'，函数（事件）{
警报（event.target.selectedOptions[0].text）；
});

--做出选择--
人工智能
安格拉斯
CSS3

函数myFunction（opt）{
警报（opt.options[opt.selectedIndex].text）；
/*如果需要所选选项的值：警报（opt.options[opt.selectedIndex].value）*/
}

--做出选择--
人工智能
安格拉斯
CSS3

函数myFunction（opt）{
警报（opt.options[opt.selectedIndex].text）；
/*如果需要所选选项的值：警报（opt.options[opt.selectedIndex].value）*/
}

--做出选择--
人工智能
安格拉斯
CSS3
尝试将警报（event.target.nodeName）放在“如果”（提示：它不是“选项”）之前。尝试将警报（event.target.nodeName）放在“如果”（提示：它不是“选项”）之前。
var select = document.getElementById('chooseSub');

select.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'option') {
    alert(event.target);
  }
});