I'm trying to get something to happen (write to div
) when a select box option has the focus. From the jsfiddle code, you can see I've got it working after the fact -- that is, once the option is selected and the mouse is moved back to the now-closed select box. How do I get it to work when the box is open?
(In case it matters, I have another function bound to the same element (the select box) that fires on a 'change' event. I wonder if that's the problem?).
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);
I think your issue is in the onchange event that is not shown. I changed addEventListener to change vs mouseover and the example works fine. I am not sure what u need the other onchange event for but maybe you can combine them.
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.