选择下拉菜单选项后显示图片

Question

I want to display a picture after an option in my dropdown menu is selected. The picture will depend on the value the user selected. I tried to do this (bear in mind that I haven't even learned JavaScript yet, I just know 2 or 3 basic functions thanks to Google):

showpic.js

document.getElementById('item').onchange = function(){
    document.getElementById('ipic').style.display = "block";
    document.getElementById('ipic').innerHTML = "<img src='http://example.com/pics/" + this.value + "'.png";
};

items.php without the PHP code for your convenience

<div id='ia'>
<form action='add_items.php' method='post'>
Username: <input name='username' type='username'> <br />
Password: <input name='password' type='password'> <br />
Item:     <select name='item' id='item'>
              <option value='100'>Example</option>
              <option value='200'>Example 2</option>
          </select>
<script src='sort.js'></script> <br/> <!-- Sorts Items in Alphabetical Order -->
<div id='ipic'></div>
<script src='showpic.js'></script>
<input name='add' type='submit' value='Add Item'>
</form>
</div>

But that didn't work. I heard it was something to do with "XMLHTTPREQUEST" & AJAX. Can anyone help me? I don't know JavaScript.

Answer 1

I'm not sure what you think you need AJAX for, but your script almost works!

"<img src='http://example.com/pics/" + this.value + "'.png";

This part is broken, because you start an <img element but you never close it ( /> ).

Change it to this:

document.getElementById('ipic').innerHTML = "<img src='http://example.com/pics/" + this.value + "'.png' />";

Now it will try to load a picture named [value] .png in that div