$("#name option").click(function(){   //some code      })

HTML:

<select id = "name">

   <optgroup label="label1">
      <option>Option a</option>
      <option>Option a</option>
   </optgroup>
   <optgroup label="label2">
      <option>Option x</option>
      <option>Option y</option>
   </optgroup>

</select>

I need to trigger a function whenever the user chooses an option from the select list. The problem is that it works only on firefox but doesn't on safari nor chrome (don't 've IE to test on it).

What I seem to be missing is properly selecting the option tags within the select tag!!

$("#name option").click(function(){   //some code      })

HTML:

<select id = "name">

   <optgroup label="label1">
      <option>Option a</option>
      <option>Option a</option>
   </optgroup>
   <optgroup label="label2">
      <option>Option x</option>
      <option>Option y</option>
   </optgroup>

</select>

I need to trigger a function whenever the user chooses an option from the select list. The problem is that it works only on firefox but doesn't on safari nor chrome (don't 've IE to test on it).

What I seem to be missing is properly selecting the option tags within the select tag!!

• javascript
• jquery
• forms
• events
• selector

• 2 you might want to try onchange of the select, instead of the onclick on the option. Some browsers don't fire all expected events on the option... – Nanne Commented Mar 16, 2012 at 17:25
• 1 Maybe the optgroup is messing up the selector. Does $("#name optgroup option") work ? – asawyer Commented Mar 16, 2012 at 17:25
• @Nanne Which should I use to trigger the onchange the option tags or the select tag?! using option tags doesn't work on safari!!! isn't that strange? – Khaled Mahmoud Commented Mar 16, 2012 at 17:28
• @asawyer adding opt group reverses the situation and it works only with firefox and not on safari – Khaled Mahmoud Commented Mar 16, 2012 at 17:34
• i think it was: onchange on select. – Nanne Commented Mar 16, 2012 at 23:00

3 Answers 3

Try this instead:

$("#name").change(function(){   //some code      });

You are marking it for having option directly under the entry IDed as name.

It should be:

$("#name optgroup option").click(function(){   //some code      })

Also you might consider locking it down a little further by doing:

$("select#name optgroup option").click(function(){   //some code      })

Check if you use css position:absolute. If you do see to that the z-index of the id or class is on top. You check this by assigning cursor:pointer; in the corresponding css id/class. If you se a hand (pointer) when mousing over, then you are on top. If not, the $('#myid').click function({}); will not work.