JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mainbody" class="bodycontainer">
<form action="submitpage.html" method="post">
<div id="mainform" style="height : 100px; padding-top: 50px;">
<div class="bleft" id="iwantto">I want to</div>
<div class="input_div">
<select class="dropdown" name="desire" id="desire" style="display: block;">
<option value="Share">Share</option>
<option value="Buy">Buy</option>
<option value="Rent">Rent</option>
</select>
</div>
<div class="bleft" id="middlea"> a </div>
<div class="input_div" id="input_div">
<select id="Share" class="dropdown" name="action" style="display: none;">
<option value="12">Room</option>
</select>
<select id="Buy" class="dropdown" name="action" style="display: none;">
<option value="1">Fridge</option>
<option value="4">TV</option>
<option value="7">Car</option>
</select>
<select id="Rent" class="dropdown" name="action" style="">
<option value="6">Room</option>
<option value="11">bike</option>
</select>
</div>
</div>
<div id="submitbutton" style="padding-left: 200px;">
<input type="submit" id="submit" title="Go" style="display: block;">
</div>
</form>
</div>
JavaScript
$('#desire').change(function() {
$('select[name=action]').hide();
$(this).find(':selected').each(function () {
show($(this).text());
});
});
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
document.getElementById(id).removeAttribute("disabled");
}
}
function hide(id)
{
document.getElementById(id).style.display = 'none';
document.getElementById(id).setAttribute("disabled","disabled");
}