onclick on option tag not working on IE and chrome

Question

I am using onclick event in option tag for select box

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

onclick event is not working on IE and Chrome but it is working fine in firefox, here I don't want to use onchange event on select tag bcz it will not trigger an event if user selects same option again

Eg:say first time user selects "one" dropdown I will open a popup after processing some stuff user closes the popup,suppose if user wants to select same "one" dropdown it will not trigger any event.this can be solved using onclick event on option tag but its not working on IE and chrome

Is there any work around for this ?

@gdoron I tried setting it up but could not do it bcz extjs is loading properly kay-zhu has answered by question it is close to what I wanted.but its behaving differently in firefox now(see my comment below.),can you pls help me out on this. — Lohith MV, Apr 11 '12 at 10:20
I'm sorry, I don't want to guess, notify me when you have a working demo to work with. I'll be glad to help you then. — gdoron, Apr 11 '12 at 11:43

score 59 · Accepted Answer · edited May 23 '17 at 12:25

59

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.

edited May 23 '17 at 12:25

Community

1
1

answered Apr 07 '12 at 22:41

K Z

29,661
8
73
78

3

Unobtrusive JavaScript would be a better solution. – Greg Apr 10 '12 at 08:35
1

@Kay Zhu everything working fine in chrome and IE but in firefox even before the selection of dropdown value it is triggering the function do you have any suggestion for that.Check this link http://jsfiddle.net/jq9td/31/ try it in the chrome and firefox you will come to know the difference. – Lohith MV Apr 11 '12 at 10:14
@kay-zhu everything working fine in chrome and IE but in firefox even before the selection of dropdown value it is triggering the function do you have any suggestion for that.Check this link http://jsfiddle.net/jq9td/31/ try it in the chrome and firefox you will come to know the difference. – Lohith MV Apr 11 '12 at 10:21
@user422543 Yep I didn't expect Firefox to behave that way. I tried various way to work around it but it seems like the fundamental problem is that Firefox treats "click" event on "select" differently from Webkit/IE. I asked a question about this here: http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec – K Z Apr 12 '12 at 08:15
Chrome & Firefox handle the click event different. Try this jsfiddle in both chrome and firefox https://jsfiddle.net/d1jb4qer/1/ – Humphrey Oct 17 '16 at 00:49
@Greg, what do you mean by unobtrusive JavaScript? I am facing this issue now on Chrome with option onclick not working and I need to write a solution that will work on most/all browsers. I don't understand what unobtrusive JS is, it's too vague, so I am seeking to understand what exactly might work to solve this issue. i.e where to put it, what does JS access, etc... – Dennis Dec 28 '21 at 22:00
use an id and reference the element, rather than writing JavaScript inside an HTML attribute such as onclick - like this - https://stackoverflow.com/a/8392395/1130266 – Greg Jan 06 '22 at 10:08

score 7 · Answer 2 · answered Nov 18 '13 at 11:50

I have another suggestion, it's not 100%, but almost:

<select onchange="valueChanged(this.value); this.selectedindex = -1">
    <option style="display: none"></option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

This way the event will be triggered even if the user selected the same option twice. The hitch is that IE will display the empty option (it ignores the style attribute), but clicking it will not fire the event, since it always starts out as being selected, and therefore selecting it does not trigger onchange...

score 2 · Answer 3 · answered Apr 05 '12 at 10:14

2

This emulates an onclick event on your options by recording the number of clicks.

http://jsfiddle.net/yT6Y5/1/

The first click is ignored (used to expand your dropdown),
The second click is effectively your "selection". (The click count is then reset).

It doesn't cater for keyboard interaction though....

Oh and I'm making use of JQuery, but you could re-do it using pure JS

answered Apr 05 '12 at 10:14

Greg

31,180
18
65
85

thanks for the reply its not working as expected eg:click on 'two' twice it will give you only one alert. anyway its very brittle we can't use this logic. – Lohith MV Apr 06 '12 at 10:32
What do you mean "click on 'two' twice will only give one pop-up"? the code in the JSFiddle will fire an event when an option is selected regardless of whether the selected index has changed. It's hardly brittle. – Greg Apr 06 '12 at 16:45
here my point is "it will not fire an event when an option is selected regardless of whether the selected index has changed".try it in chrome,it will not fire an event when you first click on dropdown thats correct but when you select any dropdown it should fire an event thats not happening. see this like http://jsfiddle.net/jq9td/31/ it work like this. – Lohith MV Apr 11 '12 at 10:30

score 1 · Answer 4 · answered Apr 07 '12 at 21:27

You just have to

put the script above the select,
set onclick and onblur for select as shown in code
and customize the check function.

I have tested it and it works :).

<script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
            // you can customize this
            alert('Changed! -> ' + value);
        }
    }

</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
    <option value="value-1"> 1 </option>
    <option value="value-2"> 2 </option>
    <option value="value-3"> 3 </option>
    <option value="value-4"> 4 </option>
</select>

hi thanks for the reply its working fine in firefox,but not in chrome, its not triggering the event when user first time clicks and selects the dropdown value. check this link http://jsfiddle.net/yT6Y5/14/ — Lohith MV, Apr 11 '12 at 10:47

score 0 · Answer 5 · answered Nov 18 '15 at 17:40

Use function(this) in id of select tag

for example

<script type="application/javascript">

var timesSelectClicked = 0;

$(function() {
    $(document).on('click keypress', 'select', function (e) {
        if (timesSelectClicked == 0)
        {
            timesSelectClicked += 1;
        }
        else if (timesSelectClicked == 1)
        {
            timesSelectClicked = 0;
            prompt($('select option:selected').text());
        }
    });
});
</script>

score 0 · Answer 6 · answered Apr 12 '19 at 07:32

This code is not working in Google Chrome but is working in Mozilla.

<select>
    <option value="2" (click)="myFunction($event)">
     <div>2</div>
    </option>

    <option value="5" (click)="myFunction($event)">
     <div>5</div>
    </option>

   <option value="10" (click)="myFunction($event)">
    <div>10</div>
  </option>

</select>

This solition is working in Chrome and Mozilla. I didn't test in Safari.;

<select (change)="myFunction($event)">
    <option value="2">
     <div>2</div>
    </option>

    <option value="5">
     <div>5</div>
    </option>

   <option value="10">
    <div>10</div>
  </option>

</select>

What syntax is that (click)="fonction" ? Is that a pre-processing language? I doesn't work natively in any browser as far as I know. — Zyo, Nov 08 '21 at 23:28

Godswill Francis · Answer 7 · 2020-05-31T16:36:15.837

0

This works on different browsers CHROME, FIREFOX, IE, AVAST BROWSER, BRAVE, Etc... And user can change the option as many times as possible with the event still occurring over and over again.

HTML:
<select id="howtopay">
    <option selected>Select</option>
    <option value="1">ATM - PAYSTACK (Instant Funding)</option>
    <option value="2">BANK DEPOSIT/TRANSFER</option>
</select>

JQUERY:
$(function(){
    $('#howtopay').change(function() {
        if ($(this).val() == "1") {
        $('#fund_with_atm').show();
        $('#fund_with_bank').hide();
      } 
        else if ($(this).val() == "2") {
        //Do Nothing
      }
      else {
        //Do Nothing
      }
    }); 
});

edited May 31 '20 at 16:36

answered May 29 '20 at 03:32

Godswill Francis

21
4

Why a re you are having 2 functions instead of an `if ($(this).val() == "1"){`...`}else if ($(this).val() == "2"){`? – Pauloco May 29 '20 at 04:13
Thats true... I actually did not recall that. Was just trying a solution that can work well on all browsers. – Godswill Francis May 31 '20 at 16:26

score 0 · Answer 8 · answered Jul 07 '21 at 13:58

0

If you want to fire onclick event only when user clicks the option use event.detail:

<select onclick="selectFunc(this.children[this.selectedIndex])">

And in your function definition:

function selectFunc(option){
  //event.detail = 0 on option click across firefox, chrome, opera, edge
  if(!event.detail){
    //your code
  }
}

answered Jul 07 '21 at 13:58

Otakar Beinhauer

3
2

Correction - it actually doesn't work in firefox. But i feel like it worked for me before. – Otakar Beinhauer Jul 07 '21 at 14:18

score 0 · Answer 9 · answered Nov 08 '21 at 23:06

I found a good workaround for those wondering.

html:

             <select id="n1" onclick="n1c()">
                    <option id="h" value=undefined disabled selected hidden>Header</option>
                    <option id="o1" value="v1">one</option>
                    <option id="o2" value="v2">two</option>
                    <option id="o3" value="v3">three</option>
                </select>

js:

    function n1c() {
        if (n1.value != undefined) {
            if (n1.value == "v1"){
                check1()
            }   else if (n1.value == "v2") {
                check2()
            }   else if (n1.value == "v3") {
                check3()
            }   
        }
    }

This allows you to run specific targeted javascript functions tailored to what you have selected. It runs both when you select the box and when you make a selection. Using the code below, you can fix/change that to fit your project.

var opt = undefined
function check1() {
    if (opt == "opt1") {
        console.log("already selected")
    }   else {
        opt = "opt1";
        <-- place code here -->
    }
}

That's about as good as I've got. It works with both chrome/edge/safari select functionality and firefox/ie select functionality. There may be a way to compact/refine this code, but it gets the job done at least.

score -1 · Answer 10 · answered Jan 22 '15 at 10:25

-1

I found that the following worked for me - instead on using on click, use on change e.g.:

jQuery('#element select').on('change',  (function() {

   //your code here

}));

answered Jan 22 '15 at 10:25

Elina Lulle

143
3
14

onclick on option tag not working on IE and chrome

10 Answers10

Linked

Related