0

I want to fire a click event(not change event) on select option tags. Click event on select option tag only works in firefox not in google chrome. I have spend a lot of time to resolve this issue still not successfull. Anyone can help me to resolve this problem. Thanx in advance.

pnuts
  • 58,317
  • 11
  • 87
  • 139
Ahmar Arshad
  • 477
  • 1
  • 10
  • 22
  • Sounds like a XY problem, why cannot you use `change` event? And ya, on chrome, you cannot bind any mouse event to `option` elements – A. Wolff Sep 30 '15 at 12:16
  • I have multiple dropdowns and a video container. On select option I have to show video related to selected option in video container. Now If I select option from first select dropdown then the video will be shown in video container and then I select option from second dropdown then video will be changed. Now If I go back to first option and click on already selected option to watch its video, here the change event will not work. – Ahmar Arshad Sep 30 '15 at 12:26

2 Answers2

2

Try editing the onclick function of the select tag to call to the option tag's onclick. The problem now is that it may call twice in FireFox.

function getSelectedOption(select) {
    return select.options[select.selectedIndex];
}

To see in action ->

<select onclick='getSelectedOption(this).click()'>
  <option onclick='log("foo")' >foo</option>
  <option onclick='log("bar")' >bar</option>
</select>

<p id="display"></p>

<script> 
function log(text) {
  document.getElementById('display').innerHTML = text;
}

function getSelectedOption(select) {
   return select.options[select.selectedIndex];
}
</script>

Also, the problem with this is that the onclick is fired once for clicking the option and another for selecting (then firefox comes around for another). So, the best way I found to patch this is to change it to an onchange for the select tag.

But sadly that only gets rid of the initial click, not FireFox's correct way of clicking...

So, if we modify our getSelectedOption function to check if the browser is chrome then we can cover our selves!

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

Our new function can look like the following...

clickSelectedOption(select) {
    if(!is_chrome) return;
    select.options[select.selectedIndex].click();
}

Mix everything together!

<select onchange='clickSelectedOption(this)'>
 <option onclick='log("foo")' >foo</option>
 <option onclick='log("bar")' >bar</option>
</select>

<p id="display"></p>

<script>
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
         
  function log(text) {
    document.getElementById('display').innerHTML = text;
  }

  function clickSelectedOption(select) {
    if(!is_chrome) return;
       select.options[select.selectedIndex].click();
  }
</script>
Community
  • 1
  • 1
tkellehe
  • 659
  • 5
  • 11
0

The answer given by @tkellehe is right, but is better to use that kind of logic for every browser, managing the option selected with switch case statement or calling a function which takes the selected option value as parameter, because still in 2023 Google Chrome has the same behavior, like other browsers (onClick method on options works only in Mozilla Firefox).

Here a React example:

import React from 'react'

function App() {


  const callOptionFunction = () => {
      const select = document.getElementById("selectDropdown")
      const selectedOption = select.options[select.selectedIndex].value
      
      //call your parametric function
      yourFunction(selectedOption)
      
      //or call a different function based on the selected option value
      switch(selectedOption){
          case "1":
              yourFunction1()
              break
          case "2":
              yourFunction2()
              break
          case "3":
              yourFunction3()
              break
      }
  }

  return (
     <div>
       <select id="selectDropdown" onChange={() => callOptionFunction()}>
         <option value="1"  >1</option>
         <option value="2"  >2</option>
         <option value="3"  >3</option>
       </select>
     </div>
 )
}
Mimmo
  • 25
  • 6