How do I show a select according to the previous option?

Asked

Viewed 43 times

1

I have two selects, User Type and User. User Type has 2 option(Global and Individual). The idea is that when the client clicks on the Individual option, appear below the select User listing all registered Users. But if you click Global, nothing will appear. Help !

message

<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>

js scripts.

$(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();
});});
javascript jquery

2 answers

2

This is a suggestion without jQuery. The idea is to use the value of select as references and hide the div.row when the value is 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


Just check that the value of select is "global" and hide the elements. If it is another value that is not "global", it shows the elements. And you don’t have to use the .hide() twice, just use once and place the two dials separated by comma:

$(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>

  • Show, it worked perfectly, thank you very much !

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.