1

Tenho dois selects, Tipo de Usuário e Usuario. Tipo de usuario tem 2 option(Global e Individual). A ideia é que quando o cliente clicar na option Individual, apareça embaixo o select Usuario listando todo os Usuarios cadastrados. Mas caso o clique em Global, não apareça nada. Help !

criar-mensagem

<div class="row">
        <label class="md-h4" for="tipoMensagem">Tipo:</label>
        <select name="message_type"  class="col-md-3 bg--white-2" style="margin-left: 90px;" required>
            <option name="" value=""></option>
            <option name="global" value="global">Global</option>
            <option name="individual" class="individual" value="individual">Individual</option>    
        </select>   
</div>
    <div class="row">
        <label class="md-h4 m_top" for="nomeUsuario">Usuário:</label>
        <select name="message_user" class="col-md-3 bg--white-2 m_top" style="margin-left: 50px;">
            <option name=""></option>
                <?php 
                    foreach ($nome as $nomeUser) {
                        extract($nomeUser);
                        if(!empty($user_name) && $user_name != "" && strtoupper($user_name) != "NULL"){       
                            echo "<option value='".($user_name)."'>{$user_name}</option>";
                        }
                    }
                ?>
        </select>
    </div>

scripts.js

$(document).ready(function(){


$('label[for="nomeUsuario"]').hide();
$('select[name="message_user"]').hide();

$('select[name="message_type"]').on('change', function(){
    $('label[for="nomeUsuario"]').show();
    $('select[name="message_user"]').show();
});});

2 Respostas 2

2

Fica uma sugestão sem jQuery. A ideia é usar o valor do select como referes e esconder a div.row quando o valor for o indivudual.

function toggleUser(type) {
  const userSelect = document.querySelector('[name="message_user"]');
  userSelect.closest('.row').style.display = type === 'individual' ? 'inherit' : 'none';
}
<div class="row">
  <label class="md-h4" for="tipoMensagem">Tipo:</label>
  <select name="message_type" onchange="toggleUser(this.value)" class="col-md-3 bg--white-2" style="margin-left: 90px;" required>
    <option name="" value=""></option>
    <option name="global" value="global">Global</option>
    <option name="individual" class="individual" value="individual">Individual</option>
  </select>
</div>
<div class="row" style="display: none;">
  <label class="md-h4 m_top" for="nomeUsuario">Usuário:</label>
  <select name="message_user" class="col-md-3 bg--white-2 m_top" style="margin-left: 50px;">
    <option name="">Antonio</option>
    <option name="">Maria</option>

  </select>
</div>

0

É só verificar se o valor do select é "global" e esconder os elementos. Se for outro valor que não seja "global", mostra os elementos. E não precisa usar o .hide() duas vezes, basta usar uma vez e colocar os dois seletores separados por vírgula:

$(document).ready(function(){
   $('label[for="nomeUsuario"], select[name="message_user"]').hide();

   $('select[name="message_type"]').on('change', function(){
      $('label[for="nomeUsuario"], select[name="message_user"]')[
         this.value == "global" ? "hide" : "show"
      ]();
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
        <label class="md-h4" for="tipoMensagem">Tipo:</label>
        <select name="message_type"  class="col-md-3 bg--white-2" style="margin-left: 90px;" required>
            <option name="" value=""></option>
            <option name="global" value="global">Global</option>
            <option name="individual" class="individual" value="individual">Individual</option>    
        </select>   
</div>
    <div class="row">
        <label class="md-h4 m_top" for="nomeUsuario">Usuário:</label>
        <select name="message_user" class="col-md-3 bg--white-2 m_top" style="margin-left: 50px;">
            <option name=""></option>
        </select>
    </div>

1
  • Show, funcionou perfeitamente, muito obrigado ! Commented 30/06/2019 às 12:16

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 .