Função: estado/cidade

2 respostas
sitehtmlcss
silvalucas

Boa tarde Pessoal,

Estou com um projeto na faculdade da qual preciso desenvolver um que o estado, quando selecionado o estado, apareça somente as cidades pertencentes à esse. Sei fazer via switch case em C, mas não sei como funciona isso na web e qual tecnologia usar e de qual forma. PHP, Javascript? Li alguns tópicos falando sobre Ajax mas nada com conteúdo…

O código até então é somente:

<!DOCTYPE html>
<html>
<head>
	<title>Re-Publica | Cadastro</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="cadastro.css">
</head>
<body>
	<img src="logo.png">
	<form name="cadastro">
		<p>Cadastre-se</p>
		<p>Nome: <input type="text" name="nome" placeholder="Digite aqui..."></p>
		<p>Email: <input type="email" name="email" placeholder="[email removido]"></p>
		<p>CPF: <input type="text" name="cpf" maxlength="11" placeholder="Formato [telefone removido]"></p>	
		<p>Estado: 
		<select name="estado"> 
   		<option value="estado">Selecione o Estado</option> 
	<option value="ac">Acre</option> 
	<option value="al">Alagoas</option> 
	<option value="am">Amazonas</option> 
	<option value="ap">Amapá</option> 
	<option value="ba">Bahia</option> 
	<option value="ce">Ceará</option> 
	<option value="df">Distrito Federal</option> 
	<option value="es">Espírito Santo</option> 
	<option value="go">Goiás</option> 
	<option value="ma">Maranhão</option> 
	<option value="mt">Mato Grosso</option> 
	<option value="ms">Mato Grosso do Sul</option> 
	<option value="mg">Minas Gerais</option> 
	<option value="pa">Pará</option> 
   	<option value="pb">Paraíba</option> 
	<option value="pr">Paraná</option> 
	<option value="pe">Pernambuco</option> 
	<option value="pi">Piauí</option> 
	<option value="rj">Rio de Janeiro</option> 
	<option value="rn">Rio Grande do Norte</option> 
	<option value="ro">Rondônia</option> 
	<option value="rs">Rio Grande do Sul</option> 
	<option value="rr">Roraima</option> 
	<option value="sc">Santa Catarina</option> 
	<option value="se">Sergipe</option> 
	<option value="sp">São Paulo</option> 
	<option value="to">Tocantins</option> 
		</select></p>		
		<p>Cidade:
		<select name="cidade">	
		<option class="ac" value="cidade1">Selecione a Cidade</option>
		<option class="ac" value="cidade1">Acrelândia</option>
    <option class="ac" value="cidade1">Assis Brasil</option>
    <option class="ac" value="cidade1">Brasiléia</option>
    <option class="ac" value="cidade1">Bujari</option>
    <option class="ac" value="cidade1">Capixaba</option>
    <option class="ac" value="cidade1">Cruzeiro do Sul</option>
    <option class="ac" value="cidade1">Epitaciolândia</option>
    <option class="ac" value="cidade1">Feijó</option>
    <option class="ac" value="cidade1">Jordão</option>
    <option class="ac" value="cidade1">Mâncio Lima</option>
   	<option class="ac" value="cidade1">Manoel Urbano</option>
    <option class="ac" value="cidade1">Marechal Thaumaturgo</option>
    <option class="ac" value="cidade1">Plácido de Castro</option>
    <option class="ac" value="cidade1">Porto Acre</option>
    <option class="ac" value="cidade1">Porto Walter</option>
    <option class="ac" value="cidade1">Rio Branco</option>
    <option class="ac" value="cidade1">Rodrigues Alves</option>
    <option class="ac" value="cidade1">Santa Rosa do Purus</option>
    <option class="ac" value="cidade1">Sena Madureira</option>
    <option class="ac" value="cidade1">Senador Guiomard</option>
    <option class="ac" value="cidade1">Tarauacá</option>
    <option class="ac" value="cidade1">Xapuri</option>
	</select>
	</p>
	<p>Senha: <input type="password" name="senha"></p>
	<p>Confirme sua senha: <input type="password" name="senha"></p>
    <input type="reset" name="limpar">
	<input type="submit" name="enviar">
	</form>
</body>
</html>

OBS: Não criei o restante das cidades ainda pois não consegui aprender a questão citada ainda…

2 Respostas

RenanRosa

Pode usar Javascript.
No evento do combo de estado você chama a função no evento onchange, ai você limpa o combo de cidade e preenche com os do estado selecionado.

Exemplo de como usar o evento onchange:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

silvalucas

Muito obrigado Renan, vou seguir essa citação e desenvolver o código.

Abraço!!

Criado 14 de maio de 2018
Ultima resposta 14 de mai. de 2018
Respostas 2
Participantes 2