Why does .click() on an select option only work on firefox? - php

Question

i have a select with some options generated from content:
<select style="color: #444;">
<?php
$select_optd = 0;
foreach($DATA as $EACHOPTION){
// Checking some internal stuff, this works
if(IFISVALID){ // Now lets say it is valid, it will output some options
// Option echo
echo '<option';
// Some code to show the first option as selected and setting some
// later needed POST javascript variables
if($select_optd == 0){
echo ' selected="selected" ';
$select_optd = 1;
$show_ctrl_id = $EACHOPTION['id'];
$show_ctrl_spot = $EACHOPTION['spot'];
}
// echo the option html data
echo ' id="PRJ_OPT_'.$EACHOPTION['id'].$EACHOPTION['spot'].'" >';
echo $EACHOPTION['title'] . ' - Spot: ' . $EACHOPTION['spot'];
echo '</option>';
?>
<script type="text/javascript">
// Now the Javascript for when the option is selected
$(document).ready(function(){
$('#PRJ_OPT_<?php print($EACHOPTION['id']); print($EACHOPTION['spot']);?>').click(function(){
// An image showing the option selected
$('#PRJ_IMG_SHOW').attr('src','<?php print($EACHOPTION['image_url']); ?>');
// Some posting inputs for later on
$('#w_prj_id_send').val('<?php print($EACHOPTION['id']); ?>');
$('#w_prj_spot_send').val('<?php print($EACHOPTION['spot']); ?>');
// An alert to test if it's working
alert('Changed');
});
});
</script>
<?php
}else{ // that option was not valid, next one. }
} // End of Foreach
?>
</select>
The problem is this .click() event on the options is only working on firefox. I've tried on Chrome, IE... only works Firefox.
Is there any resolution or explanation for this problem?
// ----------------------------------------------------------------- //
RESOLUTION:
<script type="text/javascript">
$(document).ready(function(){
$('#prj_selector').change(function(){
var SELECTED_PRJ = $('#prj_selector').val();
<?php
foreach($DATA as $EACHOPTION){
?>
if(SELECTED_PRJ == '<?php echo $EACHOPTION['title'] . ' - Spot: ' . $EACHOPTION['spot']; ?>'){
$('#PRJ_IMG_SHOW').attr('src','<?php print($EACHOPTION['image_url']); ?>');
$('#w_prj_id_send').val('<?php print($EACHOPTION['id']); ?>');
$('#w_prj_spot_send').val('<?php print($EACHOPTION['spot']); ?>');
}
<?
}
?>
});
});
</script>

Answer 1

Because <select> is a control, not a normal element.
Use .change() instead on the select element itself.

Answer 2

For select boxes you can use the .change() event instead of .click
http://comp345.awardspace.com/select_element_cheatsheet.pdf