Home/ Questions/Q 7725059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T04:50:40+00:00

I am having trouble implementing the following behaviour in a dropdown menu with jQuery.

  • 0

I am having trouble implementing the following behaviour in a dropdown menu with jQuery. I’d like it so when a user mousesover one of the options, a div is highlighted. A quick google search showed me an “non-jquery” way of doing this, which I’ve created a fiddle for here:

http://jsfiddle.net/RY5r4/

<html>
<head> 
<script type="text/javascript">

function showSelectValue(e) {
if (e.target.id!= 'select') {
document.getElementById('test').innerHTML = e.target.value;
}
}

function attachTest() {
document.getElementById('select').addEventListener('mouseover',showSelectValue,false);
}

</script>

</head>

<body onload="attachTest()">

<div id="test">Something Here</div>

<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

</body>
</html>

This effect roughly demonstrates the desired effect. The text is changed based on what option the user has selected (no clicks are required to select). I’ve currently implemented an onMouseOver handler to my select, but I am having problems determining what option is highlighted. How to I accomplish this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Translated to jQuery:

    $('#select').mouseover(function(e) {
  if (e.target.id != 'select') {
    $('#test').text(e.target.value);
  }
});

    http://jsfiddle.net/Guffa/RY5r4/7/

    This if course only works in browsers where a select element actually is displayed as a dropdown list. Also, Internet Explorer doesn’t support this.

    • 0