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.