Select Hover Script

Select Hover Script

by mikeskinner

HTML

<h3>Select List 1</h3>
<select name="selectListOne" id="selectListOne" size="1">
    <option>Option zero </option>
    <option>Option one </option>
    <option>Option two </option>
    <option>Option three </option>
    <option>Option four </option>
    <option>Option five </option>
    <option>Option six </option>
    <option>Option seven </option>
    <option>Option eight </option>
    <option>Option nine </option>
    <option>Option ten </option>
</select>
<br><br>
<h3>Select List 2</h3>
<select name="selectListTwo" id="selectListTwo" size="1">
    <option>Option zero </option>
    <option>Option one </option>
    <option>Option two </option>
    <option>Option three </option>
    <option>Option four </option>
    <option>Option five </option>
    <option>Option six </option>
    <option>Option seven </option>
    <option>Option eight </option>
    <option>Option nine </option>
    <option>Option ten </option>
</select>

JavaScript

$('select').mouseover(function() {
  	document.getElementById(this.id).size = "5";
});

$('select').mouseout(function() {
  	document.getElementById(this.id).size = "1";
});

$('select').click(function() {
  	document.getElementById(this.id).size = "1";
    console.log('Selected  Option ' + this.selectedIndex + ' of ' + this.id);
});

 $('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log(e.target.parentElement.id, 'Option: ' + e.target.index);
    };
})