Select dinamico com js

littlejuh · Junho 14, 2012

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

Arash · Junho 23, 2012

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

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! Editado Junho 24, 2012 por Arash

Entrar

Select dinamico com js

Pergunta

littlejuh

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Arash

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades