0

Este é o meu formulário:

<form name="ff">
    <select id="type" name="type">
        <option value="0">Federal</option>
        <option  value="1">Estadual</option>
        <option value="2">Municipal</option>
    </select><br>
    <div id="state" >
        <label>Estado</label>
        <input type="text" name="state"/> <br>
    </div>
    <div id="city">
        <label>Cidade</label>
        <input type="text" name="city"   /><br>
    </div>
    <label>Nome</label>
    <input type="text" name="name" id="name" />
</form>

O script jquery:

$(document).ready(function() {
  $('#state').hide();
  $('#city').hide();
  $('#type').change(function() {
    if ($('#type').val() == 1) {
        $('#state').show();
        $('#city').hide();
    }if($('#type').val() == 2) {
        $('#state').show();
        $('#city').show();
    }if($('#type').val() == 0) {
      $('#state').hide();
      $('#city').hide();
    }
  });
});

Exemplo: https://jsfiddle.net/73kspqph/5/

Mas quando vou editar não está funcionando corretamente Quando seleciono tipo a segunda opção a div city não desativa

Exemplo do problema: https://jsfiddle.net/73kspqph/8

está ficando assim

inserir a descrição da imagem aqui

e deveria ficar assim

inserir a descrição da imagem aqui

11
  • A segunda opção é a Estadual com valor 1 que de acordo com o jQuery mostra o estado e esconde a cidade. É precisamente o que vejo a acontecer no jsfiddle. Melhor será tentar clarificar de qual o nome da opção que está a escolher e o que está a aparecer que não devia
    – Isac
    13/09/2017 às 22:09
  • Editei a minha pergunta com umas imagens para entender melhor
    – Jean Prado
    14/09/2017 às 0:17
  • Seu Fiddle já está ficando como vc gostaria que ficasse. Qual o erro?
    – Meu ovo
    14/09/2017 às 0:18
  • o problema é quando vou editar esse registro que já vem selecionado tipo: Federal então quando ele vai mudar para a pagina de Editar, terá que está com os input de cidade e estado escondidos, mas não fica. como mostrei no exemplo da imagem
    – Jean Prado
    14/09/2017 às 0:21
  • 1
    Mas aparece quando seleciona. Simplesmente não aparece quando abre porque o código não é executado no inicio e sim quando muda. Pode forçar uma chamada ao change mal a página abre com $("#type").change(); antes do fim do document ready
    – Isac
    15/09/2017 às 11:26

2 Respostas 2

1

Faz uma function com a validação do combo de tipo, Ai quando der o change você chama essa função, e assim que carregar o formulário você pode chamar também, Ai assim que carregar sua view ele vai validar qual option está selecionada e tratar conforme a função Seu JS ficaria assim:

$(document).ready(function() {
  $('#state').hide();
  $('#city').hide();
  $('#type').change(function() {
   ValidaTipo();
  });
  ValidaTipo();
});

function ValidaTipo(){
 if ($('#type').val() == 1) {
        $('#state').show();
        $('#city').hide();
    }if($('#type').val() == 2) {
        $('#state').show();
        $('#city').show();
    }if($('#type').val() == 0) {
      $('#state').hide();
      $('#city').hide();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ff">
     <select id="type" name="type">
    	<option value="0">Federal</option>
    	<option selected="selected" value="1">Estadual</option>
    	<option value="2">Municipal</option>
    </select><br>
    <div id="state" >
     <label>Estado</label>
  <input type="text" name="state"/> <br>
    </div>
 <div id="city">
   <label>Cidade</label>
    <input type="text" name="city"   /><br>
 </div>
 
     <label>Nome</label>
    <input type="text" name="name" id="name" />
</form>

0

Com este script os resultados serão:

Federal: - Nome

Estadual: - Estado - Nome

Municipal: - Estado - Cidade - Nome

Agora esta mais fácil de fazer qualquer alteração, já que você precisa se preocupar apenas com os valores que serão mostrados.

    $(document).ready(function() {
      $('#state').hide();
      $('#city').hide();
      $('#type').change(function() {
        $('.nomeFormulario div').hide();
        if ($('#type').val() == 1) {
            $('#state').show();
        }
        if($('#type').val() == 2) {
            $('#state').show();
            $('#city').show();
        }
      });
    });

Adicionei a classe nomeFormulario no formulário para não ocultar alguma div de outro formulário que possa estar na mesma pagina.

<form name="ff" class="nomeFormulario">
    <select id="type" name="type">
        <option value="0">Federal</option>
        <option  value="1">Estadual</option>
        <option value="2">Municipal</option>
    </select><br>
    <div id="state" >
        <label>Estado</label>
        <input type="text" name="state"/> <br>
    </div>
    <div id="city">
        <label>Cidade</label>
        <input type="text" name="city"   /><br>
    </div>
    <label>Nome</label>
    <input type="text" name="name" id="name" />
</form>
1
  • Fiz a alteração e ele esta funcionando de acordo com a sua edição. 14/09/2017 às 0:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .