JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<label>Qual a sua cidade?</label>
    <select class="cat_dropdown" id="Cidade" name="Cidade">
    <option value="1">Fom 1</option>
    <option value="2">Fom 2</option>
    <option value="3">Fom 3</option>
    </select>
<div id="1" class="divcidade">    
     Nome: <input name="nome"/>
</div>

<div id="2" class="divcidade">   
     Nome: <input name="nome"/><br/> 
     Idade: <input name="idade"/>
</div>

<div id="3" class="divcidade">
     Nome: <input name="nome"/><br/>
     Idade: <input name="idade"/><br/>
     Cidade: <input name="cidade"/>
</div>

JavaScript

var select = document.querySelector('select#Cidade');
var cidades = document.querySelectorAll('.divcidade');

function esconder() {
    for (var i = 0; i < cidades.length; i++) {
        cidades[i].style.display = 'none';
    };
}

select.addEventListener('change', function () {
    esconder()
    var id = this.options[this.selectedIndex].value;
    console.log(id, this);
    document.getElementById(id).style.display = 'block';
});

esconder();