0

Estou tentando fazer que quando o usuário selecionar o select de id origem, e estiver a seleção "Cliente" o div de id "cli" receber display:block.

Para isso eu fiz um teste, de quando acionar o evento onchange do id origem, dar um toogle no div de id cli, mostrando ou escondendo.

Como faço entao para quando estiver o select selecionado com valor "Cliente" fazer aparecer, e se não for, fazer esconder.

Código:

<div class="col-md-4" >
    <div class="form-group">
        <label class="formLabel" for="origem">Origem</label>
        <select name="origem" id="origem" class="form-control formSelect" onchange="origem()" required>
            <option value=""></option>
            <option value="Cellsystem">Cellsystem</option>
            <option value="Santosfilho">Santosfilho</option>
            <option value="Cliente">Cliente</option>
            <option value="Licitacao">Licitação</option>
            <option value="Leilao">Leilão</option>
            <option value="Mercado Livre">Mercado Livre</option>
        </select>
    </div>
    <div class="form-group">
        <label class="formLabel" for="prioridade">Prioridade</label>
        <select name="prioridade" id="prioridade" class="form-control formSelect" required>
            <option value="baixa">Baixa</option>
            <option value="media" selected>Normal</option>
            <option value="alta">Alta</option>
        </select>
    </div>
</div>
<div class="col-md-4">
    <div class="col-md-12 cli" id="cli">
        <div class="form-group">
            <label style="width:50%;text-align:left;font-weight:normal;color:#FF5C5C;" class="formLabel" for="nfvenda">NF</label>
            <label style="width:50%;text-align:center;font-weight:normal;color:#FF5C5C;" class="formLabel" for="datanfvenda">Data de emissão</label>
            <input style="width:49%;" type="text" class="form-control formInputFL" name="nfvenda" id="nfvenda" >
            <input style="width:49%;" type="text" class="form-control formInputFR" name="datanfvenda" id="datanfvenda" >
        </div>
        <div style="clear:both;height:10px;"></div>
        <div class="form-group">
            <label style="font-weight:normal;color:#FF5C5C;" class="formLabel" for="danfe">DANFE</label>
            <input type="text" class="form-control formInput" name="danfe" id="danfe" >
        </div>
        <div class="form-group">
            <label style="color:#FF5C5C;" class="formLabel" for="cliente">Quem é o Cliente ? </label>
            <input type="text" class="form-control formInput" name="cliente" id="cliente" >
        </div>
    </div>
</div>

Segue o Javascript:

function origem() {
    $( "#cli" ).slideToggle("fast", function() {});
}

1 Resposta 1

1

Bom, eu não usaria o JQuery pra fazer essa verificação, para fazer o que quer bastar usar o evento onchange e trabalhar da seguinte maneira:

function origem(valor){
  if(valor == "Cliente"){
    document.getElementById("cli").style.display = "";
  }else{
    document.getElementById("cli").style.display = "none";
    
  }
  
}
<div class="col-md-4" >
  <div class="form-group">
    <label class="formLabel" for="origem">Origem</label>
    <select name="origem" id="origem" class="form-control formSelect" onchange="origem(this.value)" required>
      <option value=""></option>
      <option value="Cellsystem">Cellsystem</option>
      <option value="Santosfilho">Santosfilho</option>
      <option value="Cliente">Cliente</option>
      <option value="Licitacao">Licitação</option>
      <option value="Leilao">Leilão</option>
      <option value="Mercado_Livre">Mercado Livre</option>
    </select>
  </div>
  <div class="form-group">
    <label class="formLabel" for="prioridade">Prioridade</label>
    <select name="prioridade" id="prioridade" class="form-control formSelect" required>
      <option value="baixa">Baixa</option>
      <option value="media" selected>Normal</option>
      <option value="alta">Alta</option>
    </select>
  </div>
</div>
<div class="col-md-4">
  <div class="col-md-12 cli" id="cli">
    <div class="form-group">
      <label style="width:50%;text-align:left;font-weight:normal;color:#FF5C5C;" class="formLabel" for="nfvenda">NF</label>
      <label style="width:50%;text-align:center;font-weight:normal;color:#FF5C5C;" class="formLabel" for="datanfvenda">Data de emissão</label>
      <input style="width:49%;" type="text" class="form-control formInputFL" name="nfvenda" id="nfvenda" >
      <input style="width:49%;" type="text" class="form-control formInputFR" name="datanfvenda" id="datanfvenda" >
    </div>
    <div style="clear:both;height:10px;"></div>
    <div class="form-group">
      <label style="font-weight:normal;color:#FF5C5C;" class="formLabel" for="danfe">DANFE</label>
      <input type="text" class="form-control formInput" name="danfe" id="danfe" >
    </div>
    <div class="form-group">
      <label style="color:#FF5C5C;" class="formLabel" for="cliente">Quem é o Cliente ? </label>
      <input type="text" class="form-control formInput" name="cliente" id="cliente" >
    </div>
  </div>
</div>

3
  • Obrigado! Funcionou em um arquivo separado seu código, e aqui no teste da Stackoverflow, mas no codigo que estou usando não, entao vou recortar meu codigo e ver o que esta acontecendo, mas é isso que eu estava precisando.
    – Obama
    Commented 3/08/2015 às 12:39
  • @AndréSilveiraMachado aparece algum erro no console? Commented 3/08/2015 às 12:41
  • Consegui, mudei o nome da funcao para origemchange(), nao sei o que era, nao tinha nada repetido, algum bug de cache eu acho, mas agora deu certo valeu!!
    – Obama
    Commented 3/08/2015 às 12:57

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 .