Abrir uma nova opção ao escolher uma opção em um select

Front-end
#1

Pessoal, estou desenvolvendo um projetinho e precisava que quando o usuário escolhesse a opção outro no select abrisse um novo

pra ele poder digitar o outro valor, como posso fazer isso?
#2

O modo mais fácil é criar isto com o style=“display:none;” e no evento onchange do elemento select, quando a opção selecionada corresponder ao “Outro”, mudar para style.display = “inline”;

#3

Como eu faria isso na prática ?

#4

Eita povo que não estuda javascript…
Vamos lá, aula básica de HTML + DOM + CSS + JAVASCRIPT.

Todo elemento html possui determinadas propriedades, alguns mais outros menos, a maioria, porém, pode possuir um que define estilo, como posição, cor, dimensões, etc.
O elemento

por exemplo, possui a propriedade style, que, entre outros, pode fazer com que ele seja exibido ou não, através de uma subpropriedade chamada display. Além do style, o possui a propriedade id, que permite trabalharmos com DOM.
Javascript nos permite identificar propriedades de elementos HTML através de DOM, com o método getElementById, conseguimos identificar o elemento desejado e manipular as propriedades que queremos.
As funções javascript são disparadas a partir de eventos ocorridos no documento, seja de mouse, teclas ou tempo.
Um dos eventos que podem ocorrer em um é o onchange.
Como as funções podem receber parâmetros, podemos informar quem chama e quem será afetado.
Como os parâmetros podem ser os ids dos elementos envolvidos, pelo método getElementById e o submétodo value, que retora o valor de um elemento, podemos determinar se a opção “Outro” está selecionada.
Caso esteja, podemos alterar a subpropriedade display para “inline” e mostrar o oculto. Caso seja diferente, podemos ocultar este elemento.

Quer um exemplo? Aí vai.

<html>
	<head>
		<script>
			/*
				Função que recebe os ids dos elementos que dispara e será afetado
				Verifica o valor selecionado
				Exibe ou oculta o elemento afetado
			*/
			function mostraOculta(opc, id){
				if(document.getElementById(opc).value == 'Outro'){
					if(document.getElementById(id).style.display == 'none'){
						document.getElementById(id).style.display = 'inline';
					}
				}else {
					document.getElementById(id).style.display = 'none';
				}
			}
		</script>
		<title>Este código foi gerado por drsmachado</title>
	</head>
	<body>
		<table>
			<tr>
				<td id="tdd">
					<select id="ids" onchange="mostraOculta('ids', 'tdm');">
						<option value="opc1">Opc1</option>
						<option value="opc2">Opc2</option>
						<option value="opc3">Opc3</option>
						<option value="Outro">Outro</option>
					</select>
				</td>
				<td id="tdm" style="display:none;">
					<input type="text" name="nome" id="idtxt"/>
				</td>
			</tr>
		</table>
	</body>
</html>

Como este exemplo se aplica ao elemento

, você pode (pode não, DEVE) alterá-lo para que o elemento oculto seja o , como a propriedade style vai englobar a hierarquia abaixo do elemento selecionado, todos os de um ficam ocultos se este for configurado como style=“none”.
#5

Obrigado! Entendi perfeitamente :slight_smile:

#6