The onclick event does not work for options

Question

Following is my code which works fine in firefox but not in chrome. Kindly let me know how to solve this issue. The main idea is to call a js function based on the selected

Answer 1

Now I see many people asking why not the change event, well because I dont want to have to do it like this

            choose your stuff
            


Nor would I like to do this either


            choose your stuff
            

Sure there is a lot of fancy css stuff you can do together with js to overcome the situation but that means more code and more events and more that can go wrong...

As a user if the option I want is the very first, why would I first have to click on the next one just so I can select the first one! my first intuition is click on the first one! but that does not select the option and it doesn't fire the event :(

So thats a good reason why we want the click event apposed to the change event which we will also use. (Like a belt and suspenders...)

Now I have also read a lot of answers/posts with "You cant, use change" but actually that's not completely true, you can get click events to fire on a select option, however the only way I have gotten it to work is if you define a size > 1 which makes it more a list than a drop-down and maybe that is why it works...

However if you are trying to do it in the following ways it wont work!

$("#select option").on('click',function(){}); //won't work!
$(".option-class").on('click',function(){}); //won't work!
blah //won't work!