I\'m trying to do something when a user selects an option from a select box - As simple as can be right? I\'m using JQuery 1.3.1 to register a click handler with the id of t
I found my problem. For Select boxes, you need to register a handler for a "change" event rather than a "click" event. It's strange that Firefox and IE work with the click event.
To sum up, the following code works across all browsers:
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
});
</script>
</head>
<body>
<select id="myoption">
<option value="A">A</option>
<option value="B">B</option>
</select>
</body>
</html>
Safari and Chrome are both webkit based browsers. Webkit uses the native dropdown elements from your OS instead of implementing dropdowns itself, and unfortunately native dropdowns do not support a click events. For the same reason they also do not support CSS for option elements or other neat tricks.
The only cross-browser way to get those working is to implement this by hand using an <ul> and a lot of javascript.