• 0
Sign in to follow this  
littlejuh

Select dinamico com js

Question

Tenho este formulário:

<b><span class="style3">Escolha seu cargo:</span></b><br>
    <form action="gera.php" method="post" name="form">
    <select name="cargos">
    <option value="Conferência" selected>Conferência</option>
    <option value="Atendimento de Grupos">Atendimento de Grupos</option>
    <option value="Atendimento Nacional">Atendimento Nacional</option>
    <option value="Atendimento Internacional">Atendimento Internacional</option>
    <option value="Custos">Custos</option>
    <option value="Reembolso">Reembolso</option>
    <option value="Suporte">Suporte</option>
    <option value="Financeiro">Financeiro</option>
    <option value="Cobrança">Cobrança</option>
    <option value="Departamento Pessoal">Departamento Pessoal</option>
    <option value="Faturamento">Faturamento</option>
    <option value="TI">TI</option>
    <option value="Marketing">Marketing</option>
    <option value="Executivo de Contas">Executivo de Contas</option>
    <option value="Gerente Comercial">Gerente Comercial</option>
    <option value="Gerente Filial">Gerente Filial</option>
    <option value="Programação">Programação</option>
    <option value="Supervisor de Atendimento">Supervisor de Atendimento</option>
    <option value="Supervisor de Suporte">Supervisor de Suporte</option>
    <option value="Supervisor Financeiro">Supervisor Financiero</option>
    <option value="Superfisor de Faturamento">Superfisor de Faturamento</option>
    <option value="Supervisor de Marketing">Supervisor de Marketing</option>
    <option value="Supervisor de Programação">Supervisor de Programação</option>
    <option value="Supervisor de Departamento Pessoal">Supervisor de Departamento Pessoal</option>

  </select></form><br/>
Eu gostaria que o "Gerente de Filial" e o "Gerente Comercial" abrissem outro select com as cidades das filiais (SEM BANCO DE DADOS) mais ou menos como esse form aqui:
&lt;script language="JavaScript">
function Habilitar() {
if (document.getElementById("comoencontrou").value=="3") {
document.getElementById("Oculto").style.display="block";
document.getElementById("outro").focus();
} else {
document.getElementById("Oculto").style.display="none";
}
}

</script>
<form action="formulario.php" method="post" name="form" onSubmit="return Submeter();">
<label for="comoencontrou">Como encontrou nosso site?</label><br />
<select name="comoencontrou" id="comoencontrou" onChange="Habilitar();">
<option value="" selected="selected">Selecione</option>
<option value="1">Google</option>
<option value="2">Yahoo</option>
<option value="3">Outro (Informe abaixo)</option>
</select><br /><br />
<div id="Oculto" style="display:none;">
<label for="outro">Outro:</label><br />
<input type="text" name="outro" id="outro" size="50" maxlength="100" /><br /><br />
<label for="cidade">Cidade:</label><br />
<input type="text" name="cidade" id="cidade" size="25" maxlength="25" /><br /><br />
<label for="uf">UF:</label><br />
<select name="UF" id="UF" size="1">
<option value=""></option>
<option value="SP">SP</option>
<option value="RJ">RJ</option>
</select>
</div>
<input type="submit" name="Submit" value="Enviar" id="Submit">
</form>

Como fazer ? ps:não sei nada de js :( alguéem me help plx

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Eu é que não entendi nada!

Voce quer um novo select quando a pessoa escolher um dos 2 gerentes?

Se for isso eu coloco o código, mas se vira com o html e CSS, porque eu acho que vai ficar meio feio :P

Cola esse script em javascript, no dentro da head

<head><script>.......</script></head>

Que nem deu muito trabalho, porque eu copiei do seu exemplo ali de cima :D

<script>
function mostrarGerente(){
if(document.getElementById("cargos").value == "Gerente Comercial"){
    document.getElementById("mostrar").style.visibility = "visible";
}
else if(document.getElementById("cargos").value =="Gerente Filial"){
    document.getElementById("mostrar").style.visibility = "visible";
}
else document.getElementById("mostrar").style.visibility = "hidden";
}

</script>
O que voce tem que mudar no HTML
  • Vai na parte onde esta o select e cola o meu:
    <select id="cargos" name="cargos" onblur="mostrarGerente();" onchange="mostrarGerente();">
  • E cria uma div, na ultima linha, ainda dentro do form.
    <div id="mostrar" style="visibility:hidden">
      <!--			 AQUI VOCE COLOCA O SELECT QUE TANTO QUER!!!!!! Pode apagar a linha inteira	   !-->
      </div>

E o que voce não vai mudar do SEU HTML DE JEITO NENHUM!
  • A DIV que voce adicionou no final, ela tem que ter id="mostrar" e style (pode colocar no css e apagar dai), deixa "visibility: hidden;"
  • Não pode mudar no <option> o "value" dos 2 gerentes
  • E no <select> que voce copiou, id, onblur e onchange, devem continuar iguais.
Se era esse seu problema, então resolvido! Edited by Arash

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this