<select id="secectorOne" onchange="addblock(this)">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Mause">Mause</option>
</select>
<p>Cat ×</p>
<img src="https://i.ibb.co/x5dwb4z/cat.jpg" alt="cat" border="0">
<p>Dog ×</p>
<img src="https://i.ibb.co/JnSybFn/dog.png" alt="dog" border="0">
<p>Mouse ×</p>
<img src="https://i.ibb.co/kqRHj4r/mouse.jpg" alt="mouse" border="0">
p {
padding: 4px 5px;
background: #ccc;
width: 55px;
border-radius: 10px;
}
img {
width: 100px;
height: 100px;
}
function addblock(el) {
var p = document.createElement("p");
p.textContent = el.querySelectorAll("option")[el.selectedIndex].textContent;
el.parentNode.appendChild(p);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.