Select Drop Down Onclick IE not working

[aaron1988]

Hi wondered if someone could help me i am having the same kind of issue: if you go here:

http://bluegeeks-testserver.co.cc/jaclyn-beta/index.php?route=product/product&path=1&product_id=1

and your see the Select Drop Down called: Fonts, well if you choose say Airstrip or Arial the image should change but the problem i am having is. It works in IE9 and FF but doesn't seem to work in IE7, IE8 or Google Chrome i hope someone can help here is the code:

<?php if($option['mode'] == "select"){ ?>
                      <select name="option[<?php echo $option['option_id']; ?>][]"id="option[<?php echo $option['option_id']; ?>]"<?php echo $option['option_value'][0]['extra']['reqd'] == '1' ? ' validate="required:true"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['allowmultiple']) && $option['option_value'][0]['extra']['allowmultiple'] == '1' ? ' multiple="multiple"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['list_height']) ? ' size="'.$option['option_value'][0]['extra']['list_height'].'"' : ''; ?>>
                        <?php foreach ($option['option_value'] as $option_value) { ?>
                        <option value="<?php echo $option_value['option_value_id']; ?>" <?php echo (isset($option_value['option_image']) && !empty($option_value['option_image']) ? 'onClick="getPreview(\''.$option_value['option_image_thumb'] .'\', \''.$option_value['option_image_popup'] .'\');"' : ''); ?>><?php echo $option_value['name']; ?>
                        <?php if ($option_value['price']) { ?>
                        <?php echo $option_value['prefix']; ?><?php echo $option_value['price']; ?>
                        <?php } ?>
                        </option>
                        <?php } ?>
                      </select></td>
                    <?php } //end if select ?>

I know people looking at this will think "Oh My God" alot of php code :) but the only part you need to concentrate on is the part ahve put in RED here: onClick="getPreview:

Jquery Code:

<script language="javascript" type="text/javascript"><!--
function getPreview(image,popup){
$('#image').attr('src', image); //return a preview file
$('a.thickbox').attr('href', popup); //return a preview file
}
//--></script>

Hope someone can help me with this as its really bugging me

Thanks
Aaron

[twiss]

My thought is that you should use the onchange event of the select element.

[aaron1988]

Thats what i thought i just dont know how to do it :) thats why i have posted here to try and get some help :( i would even be willing to give ftp details for help :( as it needs to be fixed A.S.A.P

[twiss]

I would put those two things both in a data-thumb and data-popup attributes. In the onchange, do getPreview(). In getPreview, get the selected option's data attributes: $('#select_id option:selected').data('popup') and .data('thumb').

[aaron1988]

Could you do an example of it on the code i posted please as i never did the code above so i am a little lost :) thanks aaron

[twiss]

<script language="javascript" type="text/javascript">
function getPreview() {
    $('#image').attr('src', $('#select_id option:selected').data('thumb'));
    $('a.thickbox').attr('href', $('#select_id option:selected').data('popup'));
}
</script>

<?php if($option['mode'] == "select"){ ?>
    <select onchange="getPreview()" name="option[<?php echo $option['option_id']; ?>][]"id="option[<?php echo $option['option_id']; ?>]"<?php echo $option['option_value'][0]['extra']['reqd'] == '1' ? ' validate="required:true"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['allowmultiple']) && $option['option_value'][0]['extra']['allowmultiple'] == '1' ? ' multiple="multiple"' : ''; ?><?php echo isset($option['option_value'][0]['extra']['list_height']) ? ' size="'.$option['option_value'][0]['extra']['list_height'].'"' : ''; ?>>
    <?php foreach ($option['option_value'] as $option_value) { ?>
    <option value="<?php echo $option_value['option_value_id']; ?>" <?php echo (isset($option_value['option_image']) && !empty($option_value['option_image']) ? 'data-thumb="'.$option_value['option_image_thumb'] .' data-popup="'.$option_value['option_image_popup'] .'"' : ''); ?>><?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
    <?php echo $option_value['prefix']; ?><?php echo $option_value['price']; ?>
    <?php } ?>
    </option>
    <?php } ?>
    </select></td>
    <?php } ?>

(not tested)

[aaron1988]

now when i do that the options disappear: take a look:

http://bluegeeks-testserver.co.cc/jaclyn-beta/index.php?route=product/product&path=1&product_id=1

[twiss]

Forgot a quote; change ' data-popup="' to '" data-popup="'. Also, you need to change select_id (of course). Also; change #select_if to select[name=option[<?php echo $option; ?>][]]. I'm not sure if that works, but you could try.

[aaron1988]

Nope :( and #select_id i believe i needed to do #priducts :) anyway hehe. if i was to send you FTP details could you take a look mate i will send you a contribution if you can fix it :)

[aaron1988]

well i think it needed to be products lol but what ever way you can fix it i will send you a donation :)