JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<label>Select weapon:</label>
<select class="country">
<option disabled selected>Please select a weapon</option>
<option value="eoka">EOKA</option>
</select>
<br />Wall
<select class="country2">
<option disabled selected>Please select a type of wall</option>
<option value="ww">Wooden Wall</option>
</select></div>
<br />Ammo
<select class="country3">
<option disabled selected>Please select a ammo</option>
<option value="hs">Homemade Shell</option>
</select></div>
<div id="eoka" class="countryOption">
<div id="ww" class="countryOption2">
<div id="hs" class="countryOption3">
<br />U need 116 handame shells to destroy wooden wall
</div>
</form>
<label>Select explosive:</label>
<select class="country4">
<option disabled selected>Please select explosive</option>
<option value="bc">Beancan</option>
<option value="s">Satchel</option>
</select>
<br />Wall
<select class="country5">
<option disabled selected>Please select a type of wall</option>
<option value="ww">Wooden Wall</option>
</select></div>
<div id="s" class="countryOption4">
<div id="ww" class="countryOption5">
<br />U need 4 satchels to destroy wooden wall
</div>
CSS
.countryOption {
display: none;
}
.countryOption img {
width: 100px;
}
.countryOption2 {
display: none;
}
.countryOption2 img {
width: 100px;
}
.countryOption3 {
display: none;
}
.countryOption3 img {
width: 100px;
}
.countryOption4 {
display: none;
}
.countryOption4 img {
width: 100px;
}
.countryOption5 {
display: none;
}
.countryOption5 img {
width: 100px;
}
JavaScript
$("select.country").change(function(){
var selectedCountry = $(this).val();
$('.countryOption').hide()
$('#' + selectedCountry).show();
});
$("select.country2").change(function(){
var selectedCountry2 = $(this).val();
$('.country2Option').hide()
$('#' + selectedCountry2).show();
});
$("select.country3").change(function(){
var selectedCountry3 = $(this).val();
$('.country3Option').hide()
$('#' + selectedCountry3).show();
});
$("select.country4").change(function(){
var selectedCountry4 = $(this).val();
$('.country4Option').hide()
$('#' + selectedCountry4).show();
});
$("select.country5").change(function(){
var selectedCountry5 = $(this).val();
$('.country5Option').hide()
$('#' + selectedCountry5).show();
});