CODEWITHSUNDEEP
javascripthtmlcss
Sviat Kuzhelev
Sviat Kuzhelev

Reputation: 1788

Mouse Listeners and select option in JavaScript. mouseover eventListener does not work with <option> of <select> selector in pure JS

I'm trying to make a personalized :hover for <option> elements in <select> selector by mouseover eventListener. But for some reasons mouseover does not fired when the mouse has been on the option element.

    var selectOne = document.querySelector('.select__first');
    var selectTwo = document.querySelector('.select__second');

    for (var key in selectOne) {
      if (key % 2 == 0)
        selectOne[key].classList.add('select__option-blue');
    }

    for (var key in selectTwo) {
      if (key % 2 == 0)
        selectTwo[key].classList.add('select__option-blue');
    }
 
    function onMouseOver(e) {

      var target = event.target;

      var options = event.target.closest('option');
      if (!options) return;
      console.log(options);
    }

    document.addEventListener( 'mouseover', onMouseOver);
    .select__element > p, span {
      display: inline-block;
    }

    .select {
        -webkit-appearance: listbox;
        cursor:  pointer;
    }

    .select__option-blue {
      background-color: lightblue;
    }

    option {
      cursor:  pointer;
    }
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style type="text/css">



  </style>
</head>

<body>

 <div class="select-row">
    <div class="select__element">
      <p>The last element: </p><span class="select__element-last"></span>
    </div>
    <select class="select select__first">
      <option value="birds" hidden>Select an element...</option>
      <option value="birds">One</option>
      <option value="fishes">Two</option>
      <option value="animals">Three</option>
      <option value="dino">Four</option>
      <option value="simplest">Five</option>
    </select>

    <select class="select select__second">
      <option value="birds" hidden>Select an element...</option>
      <option value="ploto">One</option>
      <option value="trava">Two</option>
      <option value="vseyad">Three</option>
    </select>
  </div>

  <script>



  </script>

</body>

</html>

Upvotes: 1

Views: 3846

Answers (2)

Sviat Kuzhelev
Sviat Kuzhelev

Reputation: 1788

So, yes, the situation around option is a very sad. :(... As say @Veehmot - we cannot bind mouseevents on option elements of selector select normaly in pure JS.

But! In view of the fact that I did not find any clear information on stackoverflow about what exactly can be done to stylize options and select selector on pure JavaScript, I want to share my success in this direction and give the community 2 ways of solving this problem based on pure JavaScript.

I found a really two working ways for coders, who also like me will face the necessity of styling option and select on pure JavaScript without the use of frameworks (jQuery, etc.)

  1. The first way (not direct and harder) is to make the select element with options in the form of <div> selector with <buttons> or <li> list inside. The introdusing of how it work you can see on my CodePen project-page below:

https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ

  1. The second way is to connect one interesting JS library, created for options and select styling. This is really what we want, and it base on pure JavaScript with CSS. BUT! I want to admit, that this script is not mine. I found it on the open-source blog resource. So I'm not responsible for its support or help in setting up. All at your own peril and risk. I place here a link to this JS library and support files solely to help the same as I - lovers a pure javascript.

Link: https://di-grand.com/blog?download=1&kccpid=3338&kcccount=https://di-grand.com/blog/wp-content/uploads/2016/10/select.rar

Upvotes: 1

Jorjon
Jorjon

Reputation: 5434

Apparently, Chrome doesn't support mouse events on option elements, unless you specify the size attribute to the select element.

Upvotes: 2

Related Questions