Dropdown onchange/onclick not working in Chrome with php foreach

[Appeltaart]

I'm trying to make a background image change into images from the database.

It works fine in IE and FF but it doesn't work in Chrome...
Any ideas?

<div class="dropdown">                                        
<select onchange="if(this.options[this.selectedIndex].onclick && document.all) this.options[this.selectedIndex].onclick()" class="dropdown" style="width:170px;">                    
<?php foreach ($wallpapers as $wallpaper){?>                    
<script type="text/javascript">                    
<!--                                        
function wallpaperBG_<?php echo $wallpaper_number;?>() {
$('art_photo_wrap').setStyle('background-image', 'url(<?php JURI::root();?>/images/wallpaper/<?php echo $wallpaper->image;?>)');                    
$('outer').setStyle('z-index', '-1');                   
 }                                                            
-->                    
</script>                    
<option onclick="wallpaperBG_<?php echo $wallpaper_number;?>();return true"><?php echo $wallpaper->name;?></option>                    
<?php $wallpaper_number++; }?>                    
</select>
</div>

[jaybuz]

Print out the php array in JSON format and then use ajax to grab the JSON and feed it into the function, or something like that.

At the minute you are doing it COMPLETELY wrong.

[editline]13th October 2011[/editline]

Don't mix PHP and JavaScript like that.

[Jelly_]

I remember doing something like that not long ago and I believe onclick isn't cross browser compatible on <option> because different browsers render their elements differently.

[jaybuz]

<script type="text/javascript">                   
<!--
$('#dropdown option').click(function()
{
	wallpaperBG(this.value);
});
function wallpaperBG(num) {
	$('art_photo_wrap').setStyle('background-image', 'url("/images/wallpaper/' + num + '.jpg")');
	$('outer').setStyle('z-index', '-1');
}
-->                   
</script> 

<div id="dropdown">                                       
<select onchange="if(this.options[this.selectedIndex].onclick && document.all) this.options[this.selectedIndex].onclick()" class="dropdown" style="width:170px;">                   
	<?php foreach ($wallpapers as $wallpaper){?>                  
		<option value="<?php echo $wallpaper_number;?>"><?php echo $wallpaper->name;?></option>                   
	<?php $wallpaper_number++; }?>
</select>
</div>

Okay, something like that would work, obviously you need to work out how the PHP variables work and fix it.

[editline]13th October 2011[/editline]

The javascript should be in an external file.

[Jelly_]

Also, you don't need your javascript in html comments. This isn't the 90s.