Jump to content
vanessaaaaaaa

DropDown empurra div para baixo

Recommended Posts

Tenho um codigo html com JavaScript com um dropDown para estado que exibe a cidade de acordo com esse estado e depois mostra um endereço, a cada seleção ele empurra a div que esta em baixo mais para baixo.

<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";
   }else if(select.value==4){
            document.getElementById('macae').style.display = "block";
            document.getElementById('campos').style.display = "none";
            document.getElementById('ostras').style.display = "none";
            document.getElementById('itaperuna').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==5){
            document.getElementById('saquarema').style.display = "block";
            document.getElementById('campos').style.display = "none";
            document.getElementById('ostras').style.display = "none";
            document.getElementById('macae').style.display = "none";
            document.getElementById('itaperuna').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==6){
            document.getElementById('marica').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('itaperuna').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==7){
            document.getElementById('araruama').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('itaperuna').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==8){
            document.getElementById('cabo').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('itaperuna').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==9){
            document.getElementById('bonito').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('itaperuna').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==10){
            document.getElementById('pedro').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('itaperuna').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==11){
            document.getElementById('friburgo').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('itaperuna').style.display = "none";
            document.getElementById('petropolis').style.display = "none";
            document.getElementById('teresopolis').style.display = "none";
   }
   else if(select.value==12){
            document.getElementById('petropolis').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('itaperuna').style.display = "none";
            document.getElementById('teresopolis').style.display = "none";
   } else if(select.value==13){
            document.getElementById('teresopolis').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('itaperuna').style.display = "none";
   }else if(select.value==15){
            document.getElementById('velha').style.display = "block";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guacui').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
        }else if(select.value==16){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "block";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==17){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "block";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==18){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "block";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==19){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "block";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==20){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "block";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==21){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "block";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==22){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "block";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==23){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "block";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==24){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "block";
            document.getElementById('guacui').style.display = "none";
        }else if(select.value==25){
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "block";
        } else if(select.value==27){
            document.getElementById('bh').style.display = "block";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
     
        }else if(select.value==28){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "block";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
    } else if(select.value==29){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "block";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }  else if(select.value==30){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "block";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }   else if(select.value==31){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "block";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        } else if(select.value==32){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "blok";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        } else if(select.value==33){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "block";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }  else if(select.value==34){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "block";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }  else if(select.value==35){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "block";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }  else if(select.value==36){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "block";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }  else if(select.value==37){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "block";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }  else if(select.value==38){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "block";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
        }    else if(select.value==39){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "block";
            document.getElementById('ipatinga').style.display = "none";
        } else if(select.value==40){
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "block";
        }                           
        
         else{
            document.getElementById('itaperuna').style.display = "none";
            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";
            document.getElementById('velha').style.display = "none";
            document.getElementById('vitoria').style.display = "none";
            document.getElementById('serra').style.display = "none";
            document.getElementById('cariacica').style.display = "none";
            document.getElementById('itapemirim').style.display = "none";
            document.getElementById('guarapari').style.display = "none";
            document.getElementById('mateus').style.display = "none";
            document.getElementById('linhares').style.display = "none";
            document.getElementById('aracruz').style.display = "none";
            document.getElementById('colatina').style.display = "none";
            document.getElementById('guacui').style.display = "none";
            document.getElementById('bh').style.display = "none";
            document.getElementById('neves').style.display = "none";
            document.getElementById('luzia').style.display = "none";
            document.getElementById('contagem').style.display = "none";
            document.getElementById('betim').style.display = "none";
            document.getElementById('lafaiete').style.display = "none";
            document.getElementById('lagoas').style.display = "none";
            document.getElementById('barbacena').style.display = "none";
            document.getElementById('claros').style.display = "none";
            document.getElementById('juiz').style.display = "none";
            document.getElementById('divinopolis').style.display = "none";
            document.getElementById('valadares').style.display = "none";
            document.getElementById('timoteo').style.display = "none";
            document.getElementById('ipatinga').style.display = "none";
   }

   }
</script>
</div>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.