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

Question

当选择框选项具有焦点时，我正在尝试使某些事情发生（写入div ）。 从jsfiddle代码中，您可以看到事实之后，它已经可以正常工作了-也就是说，一旦选择了该选项并将鼠标移回到现在关闭的选择框中。 打开包装盒后，如何使它工作？

（以防万一，我将另一个函数绑定到在'change'事件上触发的同一元素（选择框）。我想知道这是问题所在吗？）。

HTML ：

<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>

JavaScript ：

//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);

http://jsfiddle.net/rpt613/a8hxa1jm/30/

Answer 1

我认为您的问题出在未显示的onchange事件中。 我将addEventListener更改为vs鼠标悬停，该示例正常运行。 我不确定您需要其他onchange事件做什么，但是也许您可以将它们结合起来。

JavaScript的：

//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);

http://jsfiddle.net/a8hxa1jm/31/