Question

I want to do some things when certain option is selected, how I can define that?
Here is an example:

<select id="mySelect">
   <option>...</option>
   ...
   <option>...</option>
   <option id="myOption">I need exactly this option</option>
</select>

How I can do it? I made like this:

$('#city').change(function(){
 if($("#another_city", this).is(":selected")){
        alert('ok');
     }
});

I want to see how I can make it another way, without if, of course if it possible somehow.

Answer 1

There’s a few ways this will work, however it won’t be cross browser compatible.

$('#myOption').on('click', function(event) {
   //write code here
   alert('clicked');
});

Works here in Firefox only (jsFiddle)

1. Firefox is the only browser which allows the ‘onclick’, ‘onmousedown’, and ‘onmousemove’ events to fire on an in a drop down list.

2. If the drop down is in the form of a list box, then the above mentioned events are supported across most browsers, except IE

3. Use a plugin or create a popup div as a popup menu. By doing this you can have any functionality you want, instead of being limited to the native DOM elements.

4. Otherwise use if statements

The documentation on it is very extensive at this site