Mostrar campo TEXT através de opção do SELECT - jQuery + PHP

[Fagner Campos 0]

Bom dia galera, tudo bem?

 

Estou com uma dúvida e precisava de uma ajuda de vocês!

 

Não sou muito íntimo de jQuery e por isso estou batendo a cabeça com algo que penso ser de fácil resolução, mas que já tentei e não consegui.

 

Seguinte:

 

1) Tenho um SELECT com algumas opções. Dentro delas tem uma opção que, se selecionada, habilita um campo de TEXTO para inserção de dados.

 

2) Esta habilitação está sendo feita através de jQuery com o seguinte código:

$(window).ready(function() {
			$( "#area_atendimento" ).change(function() {
				var val = $(this).val();
				if(val == 'Outra') {
					$("#control_outra_area_atendimento").fadeIn(500).show();
				} else {
					$("#control_outra_area_atendimento").fadeIn(500).hide();
				}
			});	
		});

O código está funcionando corretamente.

 

Porém o problema acontece porque meu formulário é preenchido automaticamente pelos dados vindos do BD através do PHP, pois trata-se de uma página de edição de dados.

 

Logo, se o user havia escolhido anteriormente a opção que habilitava o campo de texto, quando ele entra pra editar os dados, o campo não fica visível. Só habilita se trocar a opção no SELECT e retornar para a opção 'Outra', que é a que habilita o campo.

 

Sei que isso acontece devido o evento ser acionado com o CHANGE. E o que preciso, além do CHANGE, é que a opção do SELECT seja verificada logo de cara , assim que o form for carregado, para que o campo fique disponível ou não!

 

Alguém saberia me dizer que evento posso utilizar para verificar isso? Pois precisarei manter as duas opções: o CHANGE e a verificação imediata.

 

Desde já agradeço pela ajuda.

[ExtremsX 58]

Acho que você tem duas opções fáceis de fazer:

 

1. Na hora de criar o formulário pelo PHP, verifique se a dita opção está selecionada, se sim crie o formulário com ela já sendo exibida.

 

2. Pelo javascript, depois que a pagina for carregada, verifique se a opção está selecionada, se sim exiba o campo.

[Fagner Campos 0]

Acho que você tem duas opções fáceis de fazer:

 

1. Na hora de criar o formulário pelo PHP, verifique se a dita opção está selecionada, se sim crie o formulário com ela já sendo exibida.

 

2. Pelo javascript, depois que a pagina for carregada, verifique se a opção está selecionada, se sim exiba o campo.

 

Olá ExtremsX, obrigado pela ajuda!

 

Então, tentei fazer sua primeira sugestão mas não deu certo, porque o jQuery com o CHANGE acaba por sobreescrever o o campo, fazendo com o style do css seja setado como display:hide;

 

O ideal, ao meu ver, seria fazer com a sua segunda opção (via jQuery verificar a opção setada no SELECT) mas é o que não consegui fazer. Você poderia me dar um exemplo, por favor?

 

Obrigado.

[ExtremsX 58]

Coloque isso dentro do <script>

$(function() {
    if ($( "#area_atendimento" ).val() == 'Outra') {
        $("#control_outra_area_atendimento").fadeIn(500).show();
    } else {
        $("#control_outra_area_atendimento").fadeIn(500).hide();
    }
});

[Fagner Campos 0]

Coloquei, mas não deu certo não!

 

Quando saio da página e retorno o SELECT mostra a opção "Outra" mas o campo TEXT control_outra_area_atendimento não aparece. Só se eu mudar o SELECT e retornar para "Outra".

[ExtremsX 58]

$(function() {
    if ($( "#area_atendimento option:selected" ).val() == 'Outra') {
        $("#control_outra_area_atendimento").fadeIn(500).show();
    } else {
        $("#control_outra_area_atendimento").fadeIn(500).hide();
    }
});

Tente isso ai, esqueci do :selected

 

Se não for, tente:

$( "#area_atendimento option:selected" ).text()

[Fagner Campos 0]

$(function() {
    if ($( "#area_atendimento option:selected" ).val() == 'Outra') {
        $("#control_outra_area_atendimento").fadeIn(500).show();
    } else {
        $("#control_outra_area_atendimento").fadeIn(500).hide();
    }
});

Tente isso ai, esqueci do :selected

 

Se não for, tente:

$( "#area_atendimento option:selected" ).text()

 

Tentei também desta forma e não está indo!

 

Até tentei colocar dentro do $(window).load para ver se comportaria da forma que quero, mas continua não esperando o Select receber o OPTION do BD. Ou seja, quando executa a função o SELECT ainda não está preenchido, por tanto faz com que o campo não seja disponibilizado.

 

Algo tão simples e não estou conseguindo fazer funcionar.

[ExtremsX 58]

Da um:

console.log($( "#area_atendimento option:selected" ).val());

E veja o que está sendo impresso no console do navegar.