jquery select option click handler

Question

given    lt select id  mySelect  gt     lt option gt    lt  option gt         lt  select gt    Using the select id  how can I trigger a click event on one of the options  I tried attaching the event directly to the select  but this triggers an event whenever the select is clicked on  even if there are no options    Oh  and it is a multi-select  although I don t think that matter

User · Answer

What I have done in this situation is that I put in the option elements OnClick event like this:

<option onClick="something();">Option Name</option>

Then just create a script function like this:

function something(){
    alert("Hello"); 
    }

UPDATE: Unfortunately I can't comment so I'm updating here
TrueBlueAussie apparently jsfiddle is having some issues, check here if it works or not: http://js.do/code/klm

User · Answer

You want the  change  event handler  instead of  click        mySelect   change function         var value     this  val

User · Answer

its working for me   lt select name    id  select  gt       lt option value  1  gt  lt  option gt       lt option value  2  gt  lt  option gt       lt option value  3  gt  lt  option gt   lt  select gt    lt script gt          select  gt  option   on  click   function             alert 1          lt  script gt

User · Answer

One possible solution is to add a class to every option   lt select name  export type  id  export type  gt       lt option class  export option  value  pdf  gt PDF lt  option gt       lt option class  export option  value  xlsx  gt Excel lt  option gt       lt option class  export option  value  docx  gt DocX lt  option gt   lt  select gt    and then use the click handler for this class    document  ready function               export option   click function  e              alert  click                   UPDATE  it looks like the code works in FF  IE and Opera but not in Chrome   Looking at the specs http   www w3 org TR html401 interact forms html h-17 6 I would say it s a bug in Chrome

User · Answer

The problem that I had with the change handler was that it triggered on every keypress that I scrolled up and down the  lt select gt    I wanted to get the event for whenever an option was clicked or when enter was pressed on the desired option   This is how I ended up doing it   let blockChange   false    element keydown function  e         const keycode    e keyCode   e keyCode   e which           prevents select opening when enter is pressed     if  keycode     13            e preventDefault                  lets the change event know that these keypresses are to be ignored     if  38  40  indexOf keycode   gt  -1           blockChange   true               element keyup function e         const keycode    e keyCode   e keyCode   e which          handle enter press     if keycode     13            doSomething                 element change function e            this effective handles the click only as preventDefault was used on enter     if  blockChange            doSomething              blockChange   false

User · Answer

you can attach a focus event to select      select id   focus function         console log  Handler for  focus   called

User · Answer

x000D   x000D      mySelect   on  change   function     x000D    var value     this  val    x000D    alert value   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 0 jquery min js  gt  lt  script gt  x000D   lt select id  mySelect  gt  x000D     lt option value  1  gt 1 lt  option gt  x000D     lt option value  2  gt 2 lt  option gt  x000D     lt option value  3  gt 3 lt  option gt  x000D     lt option value  4  gt 4 lt  option gt  x000D     lt option value  5  gt 5 lt  option gt  x000D     lt option value  6  gt 6 lt  option gt  x000D     lt option value  7  gt 7 lt  option gt  x000D     lt option value  8  gt 8 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D      EXAMPLE

[javascript] jquery select option click handler

Examples related to javascript

Examples related to jquery

Examples related to html