JSFiddle - React, Tailwind, and code Playground

by Felipe Douradinho

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form action="" method="post"> 
    <span><label for="estado"><strong>*</strong>Estado:</label>
    <select name="estado_campo" id="estado_campo" required>
        <option value="">Estado</option>
        <option value="SP">São Paulo</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="PR">Paraná</option>
        <option value="BA">Bahia</option>
    </select>
    </span>
            
    <span>
    <label for="cidade_campo"><strong>*</strong>Cidade:</label>
    <select name="cidade_campo" id="cidade_campo" required>
    	<option value="0">Cidade</option>
    </select>
	</span>
            
</form>

<div id="idCidadeInfo">Selecione um estado e uma cidade</div>

JavaScript

// Declara para reuso
    var select_Estado = $('#estado_campo');
    var select_Cidade = $('#cidade_campo');
    var div_CidadeInfo = $('#idCidadeInfo');
    
    var estados = { };
    
    estados.SP = [
        {cidade: 'São Paulo', descricao: 'Grande cidade'},
        {cidade: 'Campinas', descricao: 'Descrição de Campinas'}
    ];
    
    estados.RJ = [
        {cidade: 'Cabo Frio', descricao: 'Descrição de Cabo Frio'},
        {cidade: 'Niterói', descricao: 'Descrição de Niterói'}
    ];
    
    estados.PR = [
        {cidade: 'Londrina', descricao: 'Descrição de Londrina'},
        {cidade: 'Luiziania', descricao: 'Descrição de Luiziania'}
    ];
    
    estados.BA = [
        {cidade: 'Campinas', descricao: 'Descrição de Campinas'},
        {cidade: 'Biritinga', descricao: 'Descrição de Biritinga'}
    ];

    // Quando escolher um estado
    select_Estado.on('change', function()
    {
        var estado = $(this).val();
        
        if(estado != "")
        {
            select_Cidade.html('<option value="">Cidade</option>');
            
            // preenche lista de cidades
            $.each(estados[estado], function(index, valor)
            {
                var o = new Option(valor.cidade, index);
                $(o).html(valor.cidade);
                select_Cidade.append(o);
            });
            div_CidadeInfo.html("Selecione uma cidade"); 
        }
        else
        {
               // Reseta select da cidade
               var o = new Option("Cidade", "")
               $(o).html("Cidade");
               select_Cidade.html(o);
            
               div_CidadeInfo.html("Selecione um estado e uma cidade");         
        }
    });

    // Quando escolher uma cidade
    $('#cidade_campo').on('change', function()
    {
        // Procura pela cidade no objeto 'estados' da linha #1 buscando pelo index da cidade
        var indexCidadeEscolhida = $(this).val(); // guarda o index da cidade

       ...