onclick on option tag not working on IE and chrome

by

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.

More Related Contents:

  1. How do I make a placeholder for a ‘select’ box?
  2. How can I set the default value for an HTML element?
  3. using href links inside tag
  4. Change select box option background color
  5. Height of an HTML select box (dropdown)
  6. Putting images with options in a dropdown list
  7. Line Break in HTML Select Option?
  8. How to remove the default arrow icon from a dropdown list (select element)?
  9. Select dropdown with fixed width cutting off content in IE
  10. Adding html class tag under in Html.DropDownList
  11. Remove Select arrow on IE
  12. Html Select box options on Hover?
  13. Changing highlight color
  14. HTML Form: Select-Option vs Datalist-Option
  15. Set width of dropdown element in HTML select dropdown options
  16. Default text which won’t be shown in drop-down list
  17. Are Multi-line Options in Html Select Tags Possible?
  18. How to show disable HTML select option in by default?
  19. How can I create an editable dropdownlist in HTML?
  20. Selectable in HTML tag
  21. Editable ‘Select’ element
  22. Image in SELECT element [duplicate]
  23. Setting hidden datalist option values
  24. How do I put a space character before option text in a HTML select element?
  25. Drop Down Menu/Text Field in one
  26. How can change width of dropdown list?
  27. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  28. How to get equal width of input and select fields
  29. Drawing an SVG file on a HTML5 canvas
  30. Inline style to act as :hover in CSS

Leave a Comment