How to create a dynamic select using Javascript?

Question

How can I call a dynamic select using javascript only? (I can’t wear jQuery)

When selecting the option São Paulo (state), would show me the select with the cities of São paulo and so with Santa Catarina and Rio Grande do Sul.

function cidades()
{

    var estado = document.getElementsByTagName("select")[0].value;

    var municipio=document.getElementsByTagName("select")[1].value;


    if (estado=="São Paulo")
    {
        document.getElementsByName("sp").
    }
}

<select>
    <option value>São Paulo</option>
    <option>Santa Catarina</option>
    <option>Rio Grande do Sul</option>
</select>

<select>
    <option>São Paulo</option>
    <option>Sorocaba</option>
    <option>Itapetininga</option>
</select>

<select>
    <option>Florianopolis</option>
    <option>Blumenau</option>
    <option>Garopaba</option>
</select>

<select>
    <option>Porto Alegre</option>
    <option>Uruguaiana</option>
    <option>Passo Fundo</option>
</select>

Answer 1

See if one of these options helps you:

At first I put the selects with display:none, for them not to be shown on the screen, I created a object with the information key = Nome do Estado and value = ID do select das Cidades, when the user changes the state it will trigger the event onchange that will show the select compatible with the state.

/// ; Pega o select#estado
let estado = document.getElementById("estado");

const value_elem_id = { 
  'São Paulo':'cidade_sp',
/// ^ value   :  ^ id do select cidade
  'Santa Catarina':'cidade_sc', 
  'Rio Grande do Sul':'cidade_rs'
};

/// ; Define o evento onchange no select#estado
estado.onchange = function(){
    /// ; this aqui dentro é o select#estado
    let valor = this.value;                     /// ; <- valor selecionado
    let selects = Array.from(                   /// ; <- transforma o resultado em array
      document.getElementsByTagName('select')   /// ; <- pega todos os selects 
    );
    
    selects.forEach(function(el){
    
        if(el.id != 'estado')  /// ; <- se o select não for o de estado display=none
            el.style.display='none';
        if(el.id == value_elem_id[valor] )  /// ; <- se o select é o da cidade display=block;
            el.style.display='block';
            
    });
    
    
    /// document.getElementById( value_elem_id[valor] ).style.display='block';
    /// ; outra forma de dar display block      
    
}

<select id='estado'>
    <option value='' selected disabled>Selecione o estado</option>
    <option>São Paulo</option>
    <option>Santa Catarina</option>
    <option>Rio Grande do Sul</option>
</select>


<select id='cidade_sp' style='display:none'>
    <option>São Paulo</option>
    <option>Sorocaba</option>
    <option>Itapetininga</option>
</select>

<select id='cidade_sc' style='display:none'>
    <option>Florianopolis</option>
    <option>Blumenau</option>
    <option>Garopaba</option>
</select>

<select id='cidade_rs' style='display:none'>
    <option>Porto Alegre</option>
    <option>Uruguaiana</option>
    <option>Passo Fundo</option>
</select>

In that second option I put only one subselect in HTML, and created a object that has key= Nome do Estado and value = Array com nome das cidades that will be used to dynamically fill the subselect when the user selects the state, that is, when the event onchange is fired.

let estado = document.getElementById("estado");

const value_cidades = { 
    'São Paulo': ['São Paulo','Sorocaba','Itapetininga' ],
    /// ^ value   :  ^ cidades
    'Santa Catarina':['Florianopolis','Blumenau','Garopaba'],
    
    'Rio Grande do Sul':['Porto Alegre', 'Uruguaiana', 'Passo Fundo']
 };

estado.onchange = function(){
    let estado = this.value;
    let selCidades = document.getElementById( 'cidade' );
    
    /// ; Limpa as opçoes
    selCidades.innerHTML = "";
    
    /// ; Mostra na tela com display:block
    selCidades.style.display="block";
    
    /// ; pega as cidades disponiveis 
    let cidades = value_cidades[ estado ];
    
    cidades.forEach( function( cidade ){
        /// ;  cria elemento option
        let opt = document.createElement("option");
        
        /// ; adiciona nome da cidade
        opt.innerHTML = cidade;
        
        /// ; adiciona opção no select
        selCidades.appendChild(opt);

        /// ; essas linhas de código acima poderiam ser substituídas por:
        /// ; selCidades.innerHTML += "<option>"+cidade+"</option>";
        
    });
}

<select id='estado'>
    <option value='' selected disabled>Selecione o estado</option>
    <option>São Paulo</option>
    <option>Santa Catarina</option>
    <option>Rio Grande do Sul</option>
</select>


<select id='cidade' style='display:none'>
</select>

References: createElement, appendChild, getElementById, getElementsByTagName, forEach, onchange