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

One possible solution is to add a class to every option

<select name="export_type" id="export_type">
    <option class="export_option" value="pdf">PDF</option>
    <option class="export_option" value="xlsx">Excel</option>
    <option class="export_option" value="docx">DocX</option>
</select>

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

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

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

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

User · Answer

What I have done in this situation is that I put in the option elements OnClick event like this    lt option onClick  something     gt Option Name lt  option gt    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

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

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

[javascript] jquery select option click handler

Examples related to javascript

Examples related to jquery

Examples related to html