Click event on select option element in chrome

Question

I m having a problem in Chrome with the following   var items      option   obj      items each function           this  click function                alert  test            process   this  html             return false                The click event doesn t seem to fire in Chrome  but works in Firefox   I wanna be able to click on a option element from a combo  if I do instead another kind of element  lets say  lt li gt  it works fine  Any ideas  Thanks

User · Answer

We can achieve this other way despite of directly calling event with <select>.

JS part:

$("#sort").change(function(){

    alert('Selected value: ' + $(this).val());
});

HTML part:

<select id="sort">
    <option value="1">View All</option>
    <option value="2">Ready for Review</option>
    <option value="3">Registration Date</option>
    <option value="4">Last Modified</option>
    <option value="5">Ranking</option>
    <option value="6">Reviewed</option>
</select>

User · Answer

Looking for this on 2018  Click event on option tag  inside a select tag  is not fired on Chrome   Use change event  and capture the selected option     document  delegate  select    change   function           capture the option     var  target      option selected    this          Be aware that  target may be a collection of objects if the select tag is multiple

User · Answer

Since   this  isn t correct anymore with ES6 arrow function which don t have have the same this than function       you shouldn t use    this   if you use ES6 syntax  Besides according to the official jQuery s anwser  there s a simpler way to do that what the top answer says  The best way to get the html of a selected option is to use       yourSelect option selected   html      You can replace html   by text   or anything else you want  but html   was in the original question   Just add the event listener change  with the jQuery s shorthand method change    to trigger your code when the selected option change         yourSelect    change      gt        process     yourSelect option selected   html             If you just want to know the value of the option selected  the option that the user has chosen  you can just use     yourSelect   val

User · Answer

Workaround       select id   on  change     function           this  children   selected   trigger  click

User · Answer

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

User · Answer

The easy way to change the select  and update it is this      BY id     select element selector   val  value   change      another example     By tag     name selectxD    val  value   change      another example       select element selector   val  value   trigger  chosen updated

User · Answer

Maybe one of the new jquery versions supports the click event on options  It worked for me     document  on  click   select option  function       console log  nice to meet you  console  -           UPDATE  A possible usecase could be the following  A user sends a html form and the values are inserted into a database  However one or more values are set by default and you flag this automated entries  You also show the user that his entry is generated automatically  but if he confirm the entry by clicking on the already selected option you change the flag in the database  A rare sue case  but possible

User · Answer

I ve had simmilar issue  change event was not good for me because i ve needed to refresh some data when user clicks on option  After few trials i ve got this solution      select   on  click  function ev       if ev offsetY  lt  0           user click on option        else          dropdown is shown             I agree that this is very ugly and you should stick with change event where you can  but this solved my problem

User · Answer

I don t believe the click event is valid on options   It is valid  however  on select elements   Give this a try      select yourSelect   change function        process   this  children   selected   html

User · Answer

I know that this code snippet works for recognizing an option click  at least in Chrome and FF   Furthermore  it works if the element wasn t there on DOM load  I usually use this when I input sections of inputs into a single select element and I don t want the section title to be clicked     document  on  click    option value  disableme     function           option value  disableme     prop  selected   false

User · Answer

What usually works for me is to first change the value of the dropdown  e g       selectorForOption   attr  selected   selected    and then trigger the a change      selectorForOption   changed    This way  any javascript that is wired to

User · Answer

I use a two part solution   Part 1 - Register my click events on the options like I usually would Part 2 - Detect that the selected item changed  and call the click handler of the new selected item    HTML   lt select id  sneaky-select  gt     lt option id  select-item-1  gt Hello lt  option gt     lt option id  select-item-2  gt World lt  option gt   lt  select gt    JS      select-item-1   click function      alert  hello           select-item-2   click function      alert  world            sneaky-select   change function             sneaky-select option selected   click

User · Answer

lt select id  myselect  gt       lt option value  0  gt sometext lt  option gt       lt option value  2  gt Ready for Review lt  option gt       lt option value  3  gt Registration Date lt  option gt   lt  select gt       myselect   change function         if     myselect option selected   val      0                      else

[jquery] Click event on select option element in chrome

Examples related to jquery

Examples related to google-chrome

Examples related to select