JSFiddle - React, Tailwind, and code Playground
HTML
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>
JavaScript
$select = $('#myselect');
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});