Question 51852 in Javascript Question posted in
A very good W3school tutorial can be found here.

show a label when hovered in a particular option in select – Javascript

I have a select input with a couple of options my intention is to show a pop up label with some data when the option is hovered /applied by the user my code snippet is

<span>
        <button className='dashboard-border'>
          <select
          className='dashboard-button-report'
          id="page-size" onChange={changeFilter} value={filters}>
          <option key="tWeekBar" value="thisWeek" selected={true}>This Week</option>
          <option key="lWeekBar" value="lastWeek">Last Week</option>
          <option key="tMonthBar" value="thisMonth" >This Month</option>
          <option key="lMonthBar" value="lastMonth" >Last Month</option>
          <option key="tYearBar" value="thisYear" >This Year</option>
          <option key="lYearBar" value="lastYear" >Last Year</option>
          <option key="bwDatesBar" value="betweenDates" onMouseEnter={()=>function(){console.log("hello")}} >Between Dates</option>
          </select>
        </button>
        </span>

for start i was trying to get a console output when the option Between dates is hovered upon from the select options but i was unsuccessful.what is wrong with this approach?

Tags:

2

Answers


  1. 0

    Did you try the onMouseEnter function in <select>?

    Login or Signup to reply.
  2. 0

    The issue here is that you’re trying to add an onMouseEnter event to the option element, which is not supported by HTML. You can try to use the onMouseEnter event to the select element and check for the currently selected option dynamically. This should make it work for:

    <span>
  <button className='dashboard-border'>
    <select
      className='dashboard-button-report'
      id="page-size"
      onChange={changeFilter}
      value={filters}
      onMouseEnter={() => {
        const selectEl = document.getElementById('page-size');
        const selectedOption = selectEl.options[selectEl.selectedIndex];
          console.log('hello',selectedOption);
      }}
    >
      <option key="tWeekBar" value="thisWeek" selected={true}>This Week</option>
      <option key="lWeekBar" value="lastWeek">Last Week</option>
      <option key="tMonthBar" value="thisMonth">This Month</option>
      <option key="lMonthBar" value="lastMonth">Last Month</option>
      <option key="tYearBar" value="thisYear">This Year</option>
      <option key="lYearBar" value="lastYear">Last Year</option>
      <option key="bwDatesBar" value="betweenDates">Between Dates</option>
    </select>
  </button>
</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search