Выбранное изображение после выпадающего меню выбрано

Question

Я хочу отобразить изображение после выбора в моем выпадающем меню. Изображение будет зависеть от значения, которое выбрал пользователь. Я пытался сделать это (имейте в виду, что я даже не узнал JavaScript еще, я просто знаю 2 или 3 основных функций, благодаря 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"; 
}; 

элементы .php без PHP кода для вашего удобства

<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> 

Но это не сработало. Я слышал, что это как-то связано с «XMLHTTPREQUEST» & AJAX. Может кто-нибудь мне помочь? Я не знаю JavaScript.

Answer 1

Я не уверен, что, по вашему мнению, вам нужен AJAX, но ваш скрипт почти работает!

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

Эта часть сломана, потому что вы начинаете <img элемент, но вы никогда не закрыть его (/>).

Изменить его к этому:

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

Теперь он будет пытаться загрузить изображение с именем [значение] .png в этом DIV