JSFiddle - React, Tailwind, and code Playground
HTML
<div class="selects">
<select name="origem" id="item1">
<option value="sel_ori">Selecione a Cidade Origem</option>
<option value="ori_poa">Porto Alegre</option>
<option value="ori_fln">Florianópolis</option>
</select>
<select name="destino" id="item2">
<option value="sel_dest">Selecione a Cidade Destino</option>
<option value="dest_poa">Porto Alegre</option>
<option value="dest_fln">Florianópolis</option>
</select>
</div>
<div class="btns">
<input name="Enviar" type="submit" value="Valor Passagem" onclick="passagem()"/>
<input name="Limpar" type="reset" value="Limpar" onclick="limpar()"/>
</div>
<div>
<span id="valor-passagem" class="hide"> </span>
</div>
</div>
CSS
.btns{
width: 100%;
text-align: center;
margin-top: 10px;
}
.selects{
width: 100%;
text-align: center;
}
#valor-passagem {
margin-top: 20px;
color: red;
text-align: center;
width: 100%;
}
.hide {
display: none;
}
JavaScript
function passagem(){
var sel_origem = document.getElementById("item1").value;
var sel_destino = document.getElementById("item2").value;
if (sel_origem == "ori_poa" && sel_destino == "dest_fln"){
document.getElementById("valor-passagem").textContent = "Valor da Passagem: R$300,00"
document.getElementById("valor-passagem").classList.remove("hide")
} else if (sel_origem == "ori_poa" && sel_destino == "dest_fln") {
document.getElementById("valor-passagem").textContent = "Valor da Passagem: R$200,00"
document.getElementById("valor-passagem").classList.remove("hide")
} else {
document.getElementById("valor-passagem").textContent = "Destino Inexistente"
document.getElementById("valor-passagem").classList.remove("hide")
}
}
function limpar(){
document.getElementById("valor-passagem").classList.add("hide")
document.getElementById("item1").value = "sel_ori";
document.getElementById("item2").value = "sel_dest";
}