Dropdown pushes div down

Asked

Viewed 206 times

2

I have an html code with Javascript with a dropdown to state that displays the city according to that state and then shows an address, to each selection it pushes the div that is down further down.

<div class="fisico "  >
<select id="test" name="form_select" onchange="mostrarCidade(this)" style="width: 200px;  text-align: center; text-align-last: center;">
   <option value="0">Estados</option>
   <option value="1">Rio de Janeiro</option>
   <option value="2">Espirito Santo</option>
   <option value="3">Minas Gerais</option>
</select>
<div id="cidadeRio" style="display:none;" style="position:relative;" >
<select id="rio" name="form_rio" onchange="mostrarEndereco(this)" style="width: 200px;text-align: center; text-align-last: center;" >
   <option value="0">Cidade</option>
   <option value="1">ITAPERUNA</option>
   <option value="2">CAMPOS DOS GOYTACAZES</option>
   <option value="3">RIO DAS OSTRAS</option>
   <option value="4">MACAÉ</option>
   <option value="5">SAQUAREMA</option>
   <option value="6">MARICA</option>
   <option value="7">ARARUAMA</option>
   <option value="8">CABO FRIO</option>
   <option value="9">RIO BONITO</option>
   <option value="10">SÃO PEDRO DA ALDEIA</option>
   <option value="11">NOVA FRIBURGO</option>
   <option value="12">PETROPOLIS</option>
   <option value="13">TERESOPOLIS</option>
</select><br>
<div class="ruasRio" style="width: 200px; text-align: center; text-align-last: center;">
<div id="itaperuna" style="display:none;" >AV CARDOSO MOREIRA nº325 - Centro</div>
<div id="campos"style="display:none;">AV 7 DE SETEMBRO nº492 - Centro</div>
<div id="ostras"style="display:none;">AV AMARAL PEIXOTO nº4472 - BALNEARIO REMANSO</div>
<div id="macae"style="display:none;">AV RUI BARBOSA nº663 - Centro</div>
<div id="saquarema"style="display:none;"> RUA PROF FRANCISCO FONSECA nº350 - Bacaxa</div>
<div id="marica"style="display:none;"> PC CONSELHERO MACEDO SOARES nº168 - Centro</div>
<div id="araruama"style="display:none;"> RUA MAJOR FELIX MOREIRA nº107 - Centro</div>
<div id="cabo"style="display:none;"> RUA TEIXEIRA E SOUZA  nº31 - Centro</div>
<div id="bonito"style="display:none;">RUA XV DE NOVEMBRO nº104</div>
<div id="pedro"style="display:none;">RUA DR ANTONIO ALVES nº208/218 - Centro</div>
<div id="friburgo"style="display:none;">AV ALBERTO BRAUNE nº64 - Centro</div>
<div id="petropolis"style="display:none;">RUA DO IMPERADOR nº751 - Centro</div>
<div id="teresopolis"style="display:none;">AV DELFIM MOREIRA nº610 - Centro</div>
</div>
</div>
<div id="cidadeEs" style="display:none;" style="position:relative;">
<select id="es" name="form_es" onchange="mostrarEndereco(this)" style="width: 200px;  text-align: center; text-align-last: center; ">
   <option value="14">Cidade</option>
   <option value="15">VILA VELHA</option>
   <option value="16">VITORIA</option>
   <option value="17">SERRA</option>
   <option value="18">CARIACICA</option>
   <option value="19">CACHOEIRO DE ITAPEMIRIM</option>
   <option value="20">GUARAPARI</option>
   <option value="21">SÄO MATEUS</option>
   <option value="22">LINHARES</option>
   <option value="23">ARACRUZ</option>
   <option value="24">COLATINA</option>
   <option value="25">GUACUI</option>
  </select><br>
  <div class="ruasEs" style="width: 200px; text-align: center; text-align-last: center;">
<div id="velha" style="display:none;">AV JERONIMO MONTEIRO nº74 - Centro</div>
<div id="vitoria"style="display:none;">AV PRINCESA ISABEL nº426 - Centro</div>
<div id="serra"style="display:none;">AV JOAO PALACIOS nº300 - Fatima</div>
<div id="cariacica"style="display:none;">Rod. BR 262, KM 5 nº6555 - São Francisco</div>
<div id="itapemirim"style="display:none;">RUA CEL  FRANCISCO BRAGA nº71/73 - Centro</div>
<div id="guarapari"style="display:none;"> RUA EWERSON DE ABREU SODRE nº1 - Muquicaba</div>
<div id="mateus"style="display:none;"> RUA CEL. MATEUS CUNHA nº67 - Centro</div>
<div id="linhares"style="display:none;"> AV GOV JONES SANTOS NEVES nº912 - Centro</div>
<div id="aracruz"style="display:none;">AV VENANCIO FLORES nº1116 - Centro</div>
<div id="colatina"style="display:none;">AV GETULIO VARGAS nº203 - Centro</div>
<div id="guacui"style="display:none;"> PRACA DA BANDEIRA nº1 - Centro</div>
</div>
</div>
<div id="cidadeMinas" style="display:none; " style="position:relative;" >
<select id="minas" name="form_minas" onchange="mostrarEndereco(this)" style="width: 200px" style="height: 125px; ">
   <option value="26">Cidade</option>
   <option value="27">BELO HORIZONTE</option>
   <option value="28">RIBEIRAO DAS NEVES</option>
   <option value="29">SANTA LUZIA</option>
   <option value="30">CONTAGEM</option>
   <option value="31">BETIM</option>
   <option value="32">CONSELHEIRO LAFAIETE</option>
   <option value="33">SETE LAGOAS</option>
   <option value="34">BARBACENA</option>
   <option value="35">MONTES CLAROS</option>
   <option value="36">JUIZ DE FORA</option>
   <option value="37">DIVINOPOLIS</option>
   <option value="38">GOVERNADOR VALADARES</option>
   <option value="39">TIMOTEO</option>
   <option value="40">IPATINGA</option>
   </select><br>
  <div class="ruasMinas" style="width: 200px; text-align: center; text-align-last: center;">
<div id="bh" style="display:none;">RUA DOS CARIJOS nº516 - Centro</div>
<div id="neves"style="display:none;">RUA RAIMUNDO NONATO DE SOUZA nº26 - Centro</div>
<div id="luzia"style="display:none;">AV BRASILIA nº2165 - São Benedito</div>
<div id="contagem"style="display:none;">RUA TIRADENTES nº2550 - Bairro Industrial</div>
<div id="betim"style="display:none;">RODOVIA BR 381 FERNÃO DIAS KM 492,6 - São João</div>
<div id="lafaiete"style="display:none;"> RUA DOUTOR MELO VIANA nº10 - Centro</div>
<div id="lagoas"style="display:none;"> AV DEPUTADO EMILIO DE VASCONCELOS COSTA nº34 - Centro</div>
<div id="barbacena"style="display:none;"> RUA QUINZE DE NOVEMBRO nº86 - Centro</div>
<div id="claros"style="display:none;">AV DONATO QUINTINO nº90 - Canelas</div>
<div id="juiz"style="display:none;">RUA MARECHAL DEODORO nº558 - Centro</div>
<div id="divinopolis"style="display:none;"> RUA MOACIR JOSE LEITE nº100 - Santa Clara</div>
<div id="valadares"style="display:none;"> RUA MARECHAL FLORIANO nº824 - Centro</div>
<div id="timoteo"style="display:none;"> ALAMENDA 31 DE OUTUBRO nº115 - Centro Norte</div>
<div id="ipatinga"style="display:none;"> AV 28 DE ABRIL nº187 - Centro</div>
</div>
</div>
<script type="text/javascript">

function mostrarCidade(select){
   if(select.value==1){
    document.getElementById('cidadeRio').style.display = "block";
    document.getElementById('cidadeEs').style.display = "none";
    document.getElementById('cidadeMinas').style.display = "none";
   } else if(select.value==2){
    document.getElementById('cidadeRio').style.display = "none";
    document.getElementById('cidadeEs').style.display = "block";
    document.getElementById('cidadeMinas').style.display = "none";
   }else if(select.value==3){
    document.getElementById('cidadeRio').style.display = "none";
    document.getElementById('cidadeEs').style.display = "none";
    document.getElementById('cidadeMinas').style.display = "block";
   }else{
    document.getElementById('cidadeRio').style.display = "none";
    document.getElementById('cidadeEs').style.display = "none";
    document.getElementById('cidadeMinas').style.display = "none";
}
} 
function mostrarEndereco(select){
   if(select.value==1){
    document.getElementById('itaperuna').style.display = "block";
    document.getElementById('campos').style.display = "none";
            document.getElementById('ostras').style.display = "none";
            document.getElementById('macae').style.display = "none";
            document.getElementById('saquarema').style.display = "none";
            document.getElementById('marica').style.display = "none";
            document.getElementById('araruama').style.display = "none";
            document.getElementById('cabo').style.display = "none";
            document.getElementById('bonito').style.display = "none";
            document.getElementById('pedro').style.display = "none";
            document.getElementById('friburgo').style.display = "none";
            document.getElementById('petropolis').style.display = "none";
            document.getElementById('teresopolis').style.display = "none";
    }  else if(select.value==2){
        document.getElementById('campos').style.display = "block";
        document.getElementById('itaperuna').style.display = "none";
            document.getElementById('ostras').style.display = "none";
            document.getElementById('macae').style.display = "none";
            document.getElementById('saquarema').style.display = "none";
            document.getElementById('marica').style.display = "none";
            document.getElementById('araruama').style.display = "none";
            document.getElementById('cabo').style.display = "none";
            document.getElementById('bonito').style.display = "none";
            document.getElementById('pedro').style.display = "none";
            document.getElementById('friburgo').style.display = "none";
            document.getElementById('petropolis').style.display = "none";
            document.getElementById('teresopolis').style.display = "none";
   }else if(select.value==3){
            document.getElementById('ostras').style.display = "block";
            document.getElementById('campos').style.display = "none";
            document.getElementById('itaperuna').style.display = "none";
            document.getElementById('macae').style.display = "none";
            document.getElementById('saquarema').style.display = "none";
            document.getElementById('marica').style.display = "none";
            document.getElementById('araruama').style.display = "none";
            document.getElementById('cabo').style.display = "none";
            document.getElementById('bonito').style.display = "none";
            document.getElementById('pedro').style.display = "none";
            document.getElementById('friburgo').style.display = "none";
            document.getElementById('petropolis').style.display = "none";
            document.getElementById('teresopolis').style.display = "none";
   }

I would like to know how to solve this problem

javascript dropdown

  • Try to get that style="position:relative;" because it leaves relative. I believe it is he who is doing this.

  • I’ve tried to leave without and it didn’t work.

2 answers

0


The only way I see of not pushing the bottom contents any further down and making the contents open over what comes down. But as you will see below it seems kind of strange... It will cover everything that comes down.

inserir a descrição da imagem aqui

I made this example just for Rio, I’ll leave it to you to do the others and learn how I did. But basically I needed to put position:absolut in div cidade, and in the div ruas I needed to put a background color and a border I made with box-shadow not to interfere with box model

function mostrarCidade(select) {
    if (select.value == 1) {
        document.getElementById('cidadeRio').style.display = "block";
        document.getElementById('cidadeEs').style.display = "none";
        document.getElementById('cidadeMinas').style.display = "none";
    } else if (select.value == 2) {
        document.getElementById('cidadeRio').style.display = "none";
        document.getElementById('cidadeEs').style.display = "block";
        document.getElementById('cidadeMinas').style.display = "none";
    } else if (select.value == 3) {
        document.getElementById('cidadeRio').style.display = "none";
        document.getElementById('cidadeEs').style.display = "none";
        document.getElementById('cidadeMinas').style.display = "block";
    } else {
        document.getElementById('cidadeRio').style.display = "none";
        document.getElementById('cidadeEs').style.display = "none";
        document.getElementById('cidadeMinas').style.display = "none";
    }
}

function mostrarEndereco(select) {
    if (select.value == 1) {
        document.getElementById('itaperuna').style.display = "block";
        document.getElementById('campos').style.display = "none";
        document.getElementById('ostras').style.display = "none";
        document.getElementById('macae').style.display = "none";
        document.getElementById('saquarema').style.display = "none";
        document.getElementById('marica').style.display = "none";
        document.getElementById('araruama').style.display = "none";
        document.getElementById('cabo').style.display = "none";
        document.getElementById('bonito').style.display = "none";
        document.getElementById('pedro').style.display = "none";
        document.getElementById('friburgo').style.display = "none";
        document.getElementById('petropolis').style.display = "none";
        document.getElementById('teresopolis').style.display = "none";
    } else if (select.value == 2) {
        document.getElementById('campos').style.display = "block";
        document.getElementById('itaperuna').style.display = "none";
        document.getElementById('ostras').style.display = "none";
        document.getElementById('macae').style.display = "none";
        document.getElementById('saquarema').style.display = "none";
        document.getElementById('marica').style.display = "none";
        document.getElementById('araruama').style.display = "none";
        document.getElementById('cabo').style.display = "none";
        document.getElementById('bonito').style.display = "none";
        document.getElementById('pedro').style.display = "none";
        document.getElementById('friburgo').style.display = "none";
        document.getElementById('petropolis').style.display = "none";
        document.getElementById('teresopolis').style.display = "none";
    } else if (select.value == 3) {
        document.getElementById('ostras').style.display = "block";
        document.getElementById('campos').style.display = "none";
        document.getElementById('itaperuna').style.display = "none";
        document.getElementById('macae').style.display = "none";
        document.getElementById('saquarema').style.display = "none";
        document.getElementById('marica').style.display = "none";
        document.getElementById('araruama').style.display = "none";
        document.getElementById('cabo').style.display = "none";
        document.getElementById('bonito').style.display = "none";
        document.getElementById('pedro').style.display = "none";
        document.getElementById('friburgo').style.display = "none";
        document.getElementById('petropolis').style.display = "none";
        document.getElementById('teresopolis').style.display = "none";
    }
}
<div class="fisico ">
    <select id="test" name="form_select" onchange="mostrarCidade(this)" style="width: 200px;  text-align: center; text-align-last: center;">
        <option value="0">Estados</option>
        <option value="1">Rio de Janeiro</option>
        <option value="2">Espirito Santo</option>
        <option value="3">Minas Gerais</option>
    </select>
    <div id="cidadeRio" style="display:none; position:absolute;">
        <select id="rio" name="form_rio" onchange="mostrarEndereco(this)" style="width: 200px;text-align: center; text-align-last: center;">
            <option value="0">Cidade</option>
            <option value="1">ITAPERUNA</option>
            <option value="2">CAMPOS DOS GOYTACAZES</option>
            <option value="3">RIO DAS OSTRAS</option>
            <option value="4">MACAÉ</option>
            <option value="5">SAQUAREMA</option>
            <option value="6">MARICA</option>
            <option value="7">ARARUAMA</option>
            <option value="8">CABO FRIO</option>
            <option value="9">RIO BONITO</option>
            <option value="10">SÃO PEDRO DA ALDEIA</option>
            <option value="11">NOVA FRIBURGO</option>
            <option value="12">PETROPOLIS</option>
            <option value="13">TERESOPOLIS</option>
        </select><br>
        <div class="ruasRio" style="width: 200px; text-align: center; text-align-last: center; background-color: #fff; box-shadow: inset 0 0 2px black">
            <div id="itaperuna" style="display:none;">AV CARDOSO MOREIRA nº325 - Centro</div>
            <div id="campos" style="display:none;">AV 7 DE SETEMBRO nº492 - Centro</div>
            <div id="ostras" style="display:none;">AV AMARAL PEIXOTO nº4472 - BALNEARIO REMANSO</div>
            <div id="macae" style="display:none;">AV RUI BARBOSA nº663 - Centro</div>
            <div id="saquarema" style="display:none;"> RUA PROF FRANCISCO FONSECA nº350 - Bacaxa</div>
            <div id="marica" style="display:none;"> PC CONSELHERO MACEDO SOARES nº168 - Centro</div>
            <div id="araruama" style="display:none;"> RUA MAJOR FELIX MOREIRA nº107 - Centro</div>
            <div id="cabo" style="display:none;"> RUA TEIXEIRA E SOUZA nº31 - Centro</div>
            <div id="bonito" style="display:none;">RUA XV DE NOVEMBRO nº104</div>
            <div id="pedro" style="display:none;">RUA DR ANTONIO ALVES nº208/218 - Centro</div>
            <div id="friburgo" style="display:none;">AV ALBERTO BRAUNE nº64 - Centro</div>
            <div id="petropolis" style="display:none;">RUA DO IMPERADOR nº751 - Centro</div>
            <div id="teresopolis" style="display:none;">AV DELFIM MOREIRA nº610 - Centro</div>
        </div>
    </div>
    <div id="cidadeEs" style="display:none; position:relative;">
        <select id="es" name="form_es" onchange="mostrarEndereco(this)" style="width: 200px;  text-align: center; text-align-last: center; ">
            <option value="14">Cidade</option>
            <option value="15">VILA VELHA</option>
            <option value="16">VITORIA</option>
            <option value="17">SERRA</option>
            <option value="18">CARIACICA</option>
            <option value="19">CACHOEIRO DE ITAPEMIRIM</option>
            <option value="20">GUARAPARI</option>
            <option value="21">SÄO MATEUS</option>
            <option value="22">LINHARES</option>
            <option value="23">ARACRUZ</option>
            <option value="24">COLATINA</option>
            <option value="25">GUACUI</option>
        </select><br>
        <div class="ruasEs" style="width: 200px; text-align: center; text-align-last: center;">
            <div id="velha" style="display:none;">AV JERONIMO MONTEIRO nº74 - Centro</div>
            <div id="vitoria" style="display:none;">AV PRINCESA ISABEL nº426 - Centro</div>
            <div id="serra" style="display:none;">AV JOAO PALACIOS nº300 - Fatima</div>
            <div id="cariacica" style="display:none;">Rod. BR 262, KM 5 nº6555 - São Francisco</div>
            <div id="itapemirim" style="display:none;">RUA CEL FRANCISCO BRAGA nº71/73 - Centro</div>
            <div id="guarapari" style="display:none;"> RUA EWERSON DE ABREU SODRE nº1 - Muquicaba</div>
            <div id="mateus" style="display:none;"> RUA CEL. MATEUS CUNHA nº67 - Centro</div>
            <div id="linhares" style="display:none;"> AV GOV JONES SANTOS NEVES nº912 - Centro</div>
            <div id="aracruz" style="display:none;">AV VENANCIO FLORES nº1116 - Centro</div>
            <div id="colatina" style="display:none;">AV GETULIO VARGAS nº203 - Centro</div>
            <div id="guacui" style="display:none;"> PRACA DA BANDEIRA nº1 - Centro</div>
        </div>
    </div>
    <div id="cidadeMinas" style="display:none; position:relative; ">
        <select id="minas" name="form_minas" onchange="mostrarEndereco(this)" style="width: 200px" >
            <option value="26">Cidade</option>
            <option value="27">BELO HORIZONTE</option>
            <option value="28">RIBEIRAO DAS NEVES</option>
            <option value="29">SANTA LUZIA</option>
            <option value="30">CONTAGEM</option>
            <option value="31">BETIM</option>
            <option value="32">CONSELHEIRO LAFAIETE</option>
            <option value="33">SETE LAGOAS</option>
            <option value="34">BARBACENA</option>
            <option value="35">MONTES CLAROS</option>
            <option value="36">JUIZ DE FORA</option>
            <option value="37">DIVINOPOLIS</option>
            <option value="38">GOVERNADOR VALADARES</option>
            <option value="39">TIMOTEO</option>
            <option value="40">IPATINGA</option>
        </select><br>
        <div class="ruasMinas" style="width: 200px; text-align: center; text-align-last: center;">
            <div id="bh" style="display:none;">RUA DOS CARIJOS nº516 - Centro</div>
            <div id="neves" style="display:none;">RUA RAIMUNDO NONATO DE SOUZA nº26 - Centro</div>
            <div id="luzia" style="display:none;">AV BRASILIA nº2165 - São Benedito</div>
            <div id="contagem" style="display:none;">RUA TIRADENTES nº2550 - Bairro Industrial</div>
            <div id="betim" style="display:none;">RODOVIA BR 381 FERNÃO DIAS KM 492,6 - São João</div>
            <div id="lafaiete" style="display:none;"> RUA DOUTOR MELO VIANA nº10 - Centro</div>
            <div id="lagoas" style="display:none;"> AV DEPUTADO EMILIO DE VASCONCELOS COSTA nº34 - Centro</div>
            <div id="barbacena" style="display:none;"> RUA QUINZE DE NOVEMBRO nº86 - Centro</div>
            <div id="claros" style="display:none;">AV DONATO QUINTINO nº90 - Canelas</div>
            <div id="juiz" style="display:none;">RUA MARECHAL DEODORO nº558 - Centro</div>
            <div id="divinopolis" style="display:none;"> RUA MOACIR JOSE LEITE nº100 - Santa Clara</div>
            <div id="valadares" style="display:none;"> RUA MARECHAL FLORIANO nº824 - Centro</div>
            <div id="timoteo" style="display:none;"> ALAMENDA 31 DE OUTUBRO nº115 - Centro Norte</div>
            <div id="ipatinga" style="display:none;"> AV 28 DE ABRIL nº187 - Centro</div>
        </div>
    </div>
</div>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt repudiandae sit optio dolorum, delectus impedit magni atque doloremque eos dolores ratione minima sapiente saepe placeat quam, facilis nisi autem asperiores.</p>

  • It worked really well Thank you!!!!!!!!!!!!!!!!!!! You are awesome!!!

  • @Nice that it worked out there ;)

0

Hello Vanessa welcome to Stack Overflow.
First your code is not working here because it has some errors (I don’t know if it occurred when you pasted the code to demonstrate). Be very careful to write a readable code because it is easier to find errors or failures that happen.
Among the things you should be aware of are:

  • Lack of space between class and id
    id="saquarema"style="display:none;" would be id="saquarema" style="display:none;"

  • Doubling of the style:
    style="display:none;" style="position:relative;" only one should be used style with their styles separated by ; thus style="display:none; position:relative;". Still at this point to make your life easier I strongly recommend that you use classes because with a class you control several elements without having to rewrite the style, for example this code:

    <div class="ruasRio" style="width: 200px; text-align: center; text-align-last: center;">
    <div id="itaperuna" style="display:none;" >AV CARDOSO MOREIRA nº325 - Centro</div>
    <div id="campos" style="display:none;">AV 7 DE SETEMBRO nº492 - Centro</div>
    <div id="ostras" style="display:none;">AV AMARAL PEIXOTO nº4472 - BALNEARIO REMANSO</div>
    <div id="macae" style="display:none;">AV RUI BARBOSA nº663 - Centro</div>
    <div id="saquarema" style="display:none;"> RUA PROF FRANCISCO FONSECA nº350 - Bacaxa</div>
    <div id="marica" style="display:none;"> PC CONSELHERO MACEDO SOARES nº168 - Centro</div>
    <div id="araruama" style="display:none;"> RUA MAJOR FELIX MOREIRA nº107 - Centro</div>
    <div id="cabo" style="display:none;"> RUA TEIXEIRA E SOUZA  nº31 - Centro</div>
    <div id="bonito" style="display:none;">RUA XV DE NOVEMBRO nº104</div>
    <div id="pedro" style="display:none;">RUA DR ANTONIO ALVES nº208/218 - Centro</div>
    <div id="friburgo" style="display:none;">AV ALBERTO BRAUNE nº64 - Centro</div>
    <div id="petropolis" style="display:none;">RUA DO IMPERADOR nº751 - Centro</div>
    <div id="teresopolis" style="display:none;">AV DELFIM MOREIRA nº610 - Centro</div>
</div>

Would look like this:

<head>
    <style type="text/css">

        .ruasRio {
            width: 200px;
            text-align: center;
            text-align-last: center;
        }
        .ruasRio > div {
            display: none;
        }


    </style>
</head>


    <div class="ruasRio">
        <div id="itaperuna">AV CARDOSO MOREIRA nº325 - Centro</div>
        <div id="campos">AV 7 DE SETEMBRO nº492 - Centro</div>
        <div id="ostras">AV AMARAL PEIXOTO nº4472 - BALNEARIO REMANSO</div>
        <div id="macae">AV RUI BARBOSA nº663 - Centro</div>
        <div id="saquarema"> RUA PROF FRANCISCO FONSECA nº350 - Bacaxa</div>
        <div id="marica"> PC CONSELHERO MACEDO SOARES nº168 - Centro</div>
        <div id="araruama"> RUA MAJOR FELIX MOREIRA nº107 - Centro</div>
        <div id="cabo"> RUA TEIXEIRA E SOUZA  nº31 - Centro</div>
        <div id="bonito">RUA XV DE NOVEMBRO nº104</div>
        <div id="pedro">RUA DR ANTONIO ALVES nº208/218 - Centro</div>
        <div id="friburgo">AV ALBERTO BRAUNE nº64 - Centro</div>
        <div id="petropolis">RUA DO IMPERADOR nº751 - Centro</div>
        <div id="teresopolis">AV DELFIM MOREIRA nº610 - Centro</div>
    </div>

  • And last but not least the identation (I think that’s the name), this 'technique' is nothing more than pressing the button tab to level your code every time you open a tag and add kids to it, for example this code is harder to find div closure .ruasEs:

    <div class="ruasEs" style="width: 200px; text-align: center; text-align-last: center;">
<div id="velha" style="display:none;">AV JERONIMO MONTEIRO nº74 - Centro</div>
<div id="vitoria" style="display:none;">AV PRINCESA ISABEL nº426 - Centro</div>
<div id="serra" style="display:none;">AV JOAO PALACIOS nº300 - Fatima</div>
<div id="cariacica" style="display:none;">Rod. BR 262, KM 5 nº6555 - São Francisco</div>
<div id="itapemirim" style="display:none;">RUA CEL  FRANCISCO BRAGA nº71/73 - Centro</div>
<div id="guarapari" style="display:none;"> RUA EWERSON DE ABREU SODRE nº1 - Muquicaba</div>
<div id="mateus" style="display:none;"> RUA CEL. MATEUS CUNHA nº67 - Centro</div>
<div id="linhares" style="display:none;"> AV GOV JONES SANTOS NEVES nº912 - Centro</div>
<div id="aracruz" style="display:none;">AV VENANCIO FLORES nº1116 - Centro</div>
<div id="colatina" style="display:none;">AV GETULIO VARGAS nº203 - Centro</div>
<div id="guacui" style="display:none;"> PRACA DA BANDEIRA nº1 - Centro</div>
</div>

Than that:

  <div class="ruasEs" style="width: 200px; text-align: center; text-align-last: center;">
      <div id="velha" style="display:none;">AV JERONIMO MONTEIRO nº74 - Centro</div>
      <div id="vitoria" style="display:none;">AV PRINCESA ISABEL nº426 - Centro</div>
      <div id="serra" style="display:none;">AV JOAO PALACIOS nº300 - Fatima</div>
      <div id="cariacica" style="display:none;">Rod. BR 262, KM 5 nº6555 - São Francisco</div>
      <div id="itapemirim" style="display:none;">RUA CEL  FRANCISCO BRAGA nº71/73 - Centro</div>
      <div id="guarapari" style="display:none;"> RUA EWERSON DE ABREU SODRE nº1 - Muquicaba</div>
      <div id="mateus" style="display:none;"> RUA CEL. MATEUS CUNHA nº67 - Centro</div>
      <div id="linhares" style="display:none;"> AV GOV JONES SANTOS NEVES nº912 - Centro</div>
      <div id="aracruz" style="display:none;">AV VENANCIO FLORES nº1116 - Centro</div>
      <div id="colatina" style="display:none;">AV GETULIO VARGAS nº203 - Centro</div>
      <div id="guacui" style="display:none;"> PRACA DA BANDEIRA nº1 - Centro</div>
  </div>

This way it is easier to notice if you forgot to close some div that may be causing the mistake you said.

I know this answer has gotten big and may not help what you asked, but these are concepts that will help you all your life in the field of language-independent programming. And to close I made an example of your code using what I said above and left here for you to make a comparison, and I ended that I could not find the mistake I said after making this organization.

  • 1

    Thanks you taught me all that my teacher had already taught me.

Browser other questions tagged javascript dropdown

You are not signed in. Login or sign up in order to post.