need help with my small javascripts codes

Hi i'm trying to create image using javascripts, let say that when person loading is loading default images called "Nice-City-1.png" on background of index.php page.

if person seleted other image from menu it will change image from background, i have wrote in javascripts but for some reason is not doing anything does any one can help me what did i missed!

<script type="text/javascript" language="javascript">
function ChangeImg(val) {
    document.getElementById('mydiv').style.backgroundImage = val;
}
</script>

<div id="mydiv" style="width: 300px; height: 300px; background: url(background/City/Nice-City-1.png);">
<select onchange="ChangeImg(this.option[this.selectIndex].value)">
    <option value="Nice-City-3.png">first-image.jpg
    <option value="Snow-city.png">second-image.jpg
    <option value="Snow-city.png">3rd-image.jpg
    <option value="Snow-city3.png">fourth-image.jpg
</select>

Code (markup):

if i have to write addiation line in php, what do i need to write to make sure is showing image after they selected image!

AM

 

Hi, this.selectIndex should be this.selectedIndex