当选择框选项具有焦点时，不会触发Javascript事件

当选择框选项具有焦点时，我试图让写入div发生一些事情。从JSFIDLE代码中，您可以看到我已经让它在实际操作之后工作了——也就是说，一旦选择了选项，鼠标移回现在关闭的选择框。盒子打开时，我如何让它工作

如果有关系，我将另一个函数绑定到同一个元素，即在“更改”事件中触发的选择框。我不知道这是不是问题所在

HTML:

---

我认为您的问题在未显示的onchange事件中。我将addEventListener更改为change vs mouseover，该示例运行良好。我不确定你还需要其他onchange活动做什么，但也许你可以将它们结合起来

JavaScript:

---

选项元素并不始终支持鼠标悬停事件。但也有一些解决办法：啊哈！线索。我的代码在FF中工作，但在Chrome或IE中不工作。我将调查解决方法。谢谢Zentoaku，谢谢你的回复。你对我的代码的编辑确实有效，但这不是我想要的。是我的错。我想我没有很好地解释这个问题。我所追求的结果类似于工具提示。当我的站点的用户将鼠标悬停在一个选择框选项上时，我想向他们展示代码中提示div中的一些文本，我意识到我可以将title属性附加到该选项以实现同样的效果。或者使用qtip或Jquery工具提示之类的插件。如果我不能让自己的代码正常工作，我可能最终会这样做，但我很确定，这是不必要的，因为这里有这么多的专业知识。再次感谢。

<div id="Hint"></div>
<div id='select-container'>
    <select name="parent_selection" id="parent_selection">
        <option selected="selected">-- Select 1st option --</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
    <select name="child_selection" id="child_selection">
        <option value="">-- Select 2nd option --</option>
    </select>
</div>

//Display hint for hovered selection in 1st dropdown
var elSelect_container, elHint; // Declare variables

elAppSelected = document.getElementById('parent_selection');
elHint = document.getElementById('Hint');

function Hint() {
    var elAppSelected = this.options[this.selectedIndex].value;

    if (elAppSelected === 'option1') {
        elHint.innerHTML = 'Good choice';
    }
    if (elAppSelected === 'option2') {
        elHint.innerHTML = 'Better choice';
    }
    if (elAppSelected === 'option3') {
        elHint.innerHTML = 'Best Choice!';
    }
}
    //Create event listener: mouseover calls Hint()
    elAppSelected.addEventListener('mouseover', Hint, false);

//Display hint for hovered selection in 1st dropdown
var elSelect_container, elHint; // Declare variables

elAppSelected = document.getElementById('parent_selection');
elHint = document.getElementById('Hint');

function Hint() {
    var elAppSelected = this.options[this.selectedIndex].value;

    if (elAppSelected === 'option1') {
        elHint.innerHTML = 'Good choice';
    }
    if (elAppSelected === 'option2') {
        elHint.innerHTML = 'Better choice';
    }
    if (elAppSelected === 'option3') {
        elHint.innerHTML = 'Best Choice!';
    }
}
    //Create event listener: mouseover calls Hint()
    elAppSelected.addEventListener('change', Hint, false);         
  //elAppSelected.addEventListener('mouseover', Hint, false);