console.log form option value on mouseover

Question

I have research questions related to this but couldn't get the solution. What I want to do is to be able to log the option value when I move my mouse over the option. Below is the code that I have right now which is only loging the selected values. I am using google CDN JQuery. Any help will be appreciated.

<select>
    <option> value="volvo">Volvo</option>
    <option> value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Here is JS

<script>
    $(document).ready(function(){
        var select = $("select").children("option");
        $(select).on('mouseover', function(){
            console.log('The option with value ' + $(this).val());
        });
    });
</script>

Answer 1

You've got a syntax error in your <select> element, but I'm hoping that isn't actually going on in your real code.

All I did was target the select element instead of the children and it worked fine.

HTML

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

JS

$(document).ready(function () {
    var select = $("select")
    $(select).on('mouseover', function () {
        console.log('The option with value ' + $(this).val());
    });
});