Show image depending on select option with custom value attribute
<p>What I want to reach:</p>

<p>Show an image depending on select box selection. But I don't want to take attribute <code>value=""</code>, I want to take a custom attribute <code>data-img=""</code> instead.</p>

<p>This is the code I actually have, but it's not working:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script src="http://code.jquery.com/jquery-latest.pack.js"&gt;&lt;/script&gt;
&lt;script&gt;
function showFormatImage() {
    var image = document.getElementById("itemImage");
    image.src = $('select[name=itemImage] option:selected').data('img');
    return false;
}
document.getElementById("itemImage").onchange = showFormatImage;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;select id="itemImage" name="itemImage"&gt;
    &lt;option data-img="first.png"&gt;First&lt;/option&gt;
    &lt;option data-img="second.png"&gt;Second&lt;/option&gt;
    &lt;option data-img="third.png"&gt;Third&lt;/option&gt;
&lt;/select&gt;&lt;br&gt;

&lt;img id="itemImage" src=""&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>No image is shown. Does anybody know what's wrong?</p>

<p><em>P.S.: If there's a non-Javascript solution, that would be even better but I don't think there is.</em></p>