JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div id="show"></div>
<table width="600">
    <tr>
        <td width="200">
            <label for="select-song">Select your favourite song</label>
        </td>
  </tr>
    <tr>
        <td>
            <select name="song" id="select-song" class="input-step">
                <option value=""></option> 
              <option value="http://s25.postimg.org/5fhbardwb/mini_botti.jpg">aaa</option>
              <option value="http://s25.postimg.org/3oya99wd7/mini_topo.jpg">bbb</option>
              <option value="http://s25.postimg.org/3u0pkd1cr/minigatto.jpg">ccc</option>
            </select>
        </td>
    </tr>
</table>

CSS

.hidden {
    display: none;
}


/* following styles are just for demo purposes */

table {
    border: 1px dashed #999;
}

table td {
    padding: 5px;
    border: 1px dashed #999;
}

JavaScript

$('#select-song').on('change',function(){
		$('#show img').remove()
		var img=$('option:selected').val()
		$('<img>').attr('src',img).appendTo('#show')
		})