JSFiddle - React, Tailwind, and code Playground

by david beckham

HTML

<body>
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
<option value="box4">Box 4</option>
<option value="box5">Box 5</option>
<option value="box6">Box 6</option>
</select>

<!-- the DIVs -->
<div id="boxes">
<div id="box1">1<</div>
<div id="box2">2</div>
<div id="box3">3<iframe src="iframe1.php?currency=euro" width="300" height="200" frameborder="0"></iframe></div>
<div id="box4">4<iframe src="iframe1.php?currency=au" width="300" height="200" frameborder="0"></iframe></div>
<div id="box5">5<iframe src="iframe1.php?currency=nz" width="300" height="200" frameborder="0"></iframe></div>
<div id="box6">6<iframe src="iframe1.php?currency=ca" width="300" height="200" frameborder="0"></iframe></div>
</div>
</body>

CSS

#boxes div
{
    display:none;
}

JavaScript

$(document).ready(function(){
$("#thechoices").change(function(){
    $('#boxes div').hide();
    $('#'+$(this).val()).show();
});
});