selection of an item in the combobox

Asked

Viewed 63 times

0

I have the following combobox as shown below, it is filled with data coming from a table of a database, so far so good, I would like when a combobox item was selected an input was displayed, and when no item was selected the input was hidden. It is possible to do this with javascript?

<div class="col-sm-12" id="">
 <div class="form-group">
  <label for="processo">EMPRESA *</label></a><br/>  
     <select name="empresa" id="empresa" 
      onchange="ExibirDiv(this.value)" class="form-control">
       <option value="">SELECIONE</option>
          <?php
             $parametro_empresa = filter_input(INPUT_GET,"parametro_empresa");
             $empresa = "SELECT * FROM tb_empresa WHERE 
             razaosocial_pessoafisica LIKE '%" . $parametro_empresa . "%'";                                          
             $recebe_empresas = mysqli_query($con, $empresa);
              while ($linha = mysqli_fetch_array($recebe_empresas)) {
               echo '<option value="' . $linha['codigo_empresa'] . '">' . 
               $linha['razaosocial_pessoafisica'] . '</option>';
             }
          ?>
     </select>
  </div>
</div>
  • 1

    Yes. It is possible

1 answer

0

With display block in jquery you can

Take a look

$('.combo').on('change', function(){
    if( $(this).val() != ""){
       $('#campo').css('display','block')
       $('#campo').val( $(".combo option:selected").text() )
    }else{
      $('#campo').css('display','none')
     } 
})
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <select class="form-control combo" >
    <option value="">Selecione</option>
    <option value="1">Valor 1</option>
    <option value="2">Valor 2</option>
    <option value="3">Valor 3</option>
    <option value="4">Valor 4</option>
    <option value="5">Valor 5</option>
  </select>
</div>

<input id="campo" class="form-control" style="display: none" >

I hope it helps

  • Code can be improved using methods .show() and .hide() of jQuery, see: https://jsfiddle.net/us920Ly4/1/

Browser other questions tagged

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