Onclick on Option Tag Not Working on Ie and Chrome

onclick on option tag not working on IE and chrome

onclick event on option tag will fail on most versions of IE, Safari and Chrome: reference

If you want to trigger an event whenever user select, why not simply use:

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

And if you want to do something with the specific option user selected:

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

This way you are guaranteed to call check() if and only if an option is selected.

Edit: As @user422543 pointed out in the comments, this solution will not work in Firefox. I therefore asked another question here: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

So far it seems using <select> tag is will not work consistently in all browsers. However, if we simulate a select menu using library such as jQuery UI select menu or Chosen to create a select menu instead of using <select> tag, click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.

Onclick event not working over option tag in IE 11

The onclick procedure should belong to the Select element - then you pick up the selected option with SelectBox.SelectedIndex... (something like that - look it up)

As far as I know that should then work cross-browser.

Onclick function is not working in Chrome browser

I have another suggestion

<select onchange="valueChanged(this.value);" name="Consolidate Report" class="input">
        <option value="">Consolidate Report</option>
        <option value="view_graph" >View Graph</option>
        <option value="export_graph">Export Excel</option>
 </select>

        <script> 

         function valueChanged(value){

            if(value == 'view_graph')
            {
                alert('view_graph');
            }else if(value == 'export_graph')
            {
                alert('export_graph');
            }
          }
        </script>

JS onclick() not called at all in IE

It seems that there're issues with onclick events in <option> tags. One of the alternatives would be placing an onchange event into the parent <select> tag:

<select onchange="check(this.value)">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

Then check() function is executed every time an option is selected (clicked):

function check(value) {
  alert(value);
}

Also, you could look at the option's value to run certain code only for it:

function check(value) {
  if (value === 2) {
    alert("You clicked two!");
  }
}

Working example

https://codepen.io/anon/pen/jwbvbR

Onclick doesn't work in Chrome

<select class="input" onchange="window.location.href = this.value" style="width:200px">
        <option>---</option>
        <option value="link.php">one</option>
        <option value="link2.php">two</option>
    </select>

I know its not EXACTLY the same... but having a click event on the option of a select list is not good practice. Instead of onchange, you could have onclick as well... but onchange really is the way to do this, in my opinion.

Onclick event firing in Firefox and IE but not in Chrome

option elements don't fire the click event in all browsers, you should stray away from relying on this. Instead you can use onchange() event for select. You may use something like this

<html>
 <head>
  <script type="text/javascript">

   function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    alert(selectedValue);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>`enter code here`
  </select>
 </body>`enter code here`
</html>

In Your case you use like

<form id='myForm' action="#">
  <select id='mySelect' name="moduleidval" class="validate['required']" onchange="showhidefields(this.value,this.form,'0');">
   <option value="-">-- Selecteer Proces--</option>
   <option value="1"> 'Klantprocessen'</option>
</select>
</form>

onclick event is not working in chrome

Try this please. you should add 'onChange' event in <select> tag instead on onClick in <option>

<select onchange="document.getElementById('adscity_h').value=this.value">

Work around for onclick event of option tag

One way to do it is using an array to keep record what been selected/deselected, and rebuild your options everytime user click.

js:

var record = [];

var selectAllItems = function (target) {
    //toggle all options here and keep a record in "record" array ...
}

var doTheMagic = function(target){
    record[target.selectedIndex] = ! record[target.selectedIndex];
    rebuildOptions();

}

var rebuildOptions = function (){
    var itemsList = document.getElementById('itemsList');
    for (var i=0;i<record.length;i++){
            itemsList.options[i].selected = record[i];
    }

}

html:

<select id="itemsList" multiple="true" size="3"  onclick="doTheMagic(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="audi">Audi</option>
</select>
<input type="checkbox" id="bSelectAll" onclick="selectAllItems(this)" />Select all

jsFiddle demo: http://jsfiddle.net/3A9Xs/3/

Onclick on Option Tag Not Working on Ie and Chrome