jquery: option plus class and click

why does this only work in Firefox? How can I make it work in all browsers?

<script type="text/ja开发者_如何学Govascript">
$(document).ready(function(){   
    $(".radio_c").click(function(){
        alert('message');
    });
}); 
</script>

<select name = "list1">
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option class="radio_c" value="car_bmw">bmw</option>
    <option class="radio_c" value="car_audi">audi</option>
</select>

As others have said you want to bind an event to the drop down list with change. From there you can inspected the selected element and handle it as such.

$("select").change(function() {
    if ($(this).find(":selected").hasClass("radio_c")) {
        $("ul").append("<li>Selected: " + $(this).find(":selected").val() + "</li>");
    }
});

Example on jsfiddle.

Options cannot be clicked. Only the select can be clicked. Option is an internal thing. It cannot have DOM-stuff attached to it, so it can't be disabled / enabled. If you want to disable one, you'll need to remove it from the DOM. It is not like a 'normal' html element.

I think you are looking for change() instead of click(), something like this:

$("select").change(function() {
  if($(':selected', this).hasClass('radio_c')) {
    alert('message');
  }
}

You cannot attach events to option tags. You can attach a change() event to the select, which will trigger whenever you select an option.

$(document).ready(function(){
  $('select[name="list1"]').change(function(){
    if($('option:selected', this).hasClass('radio_c')){
      alert($(this).val());
    }
  });
});