selecting an item in the combobox

Question

selecting an item in the combobox

Navigation

#1 by (0 votes)

0

I have the following combobox as shown below, it is populated with the data coming from a table of a database, so yeah, I would like when an item of the combobox was selected an input was displayed, and when it was not No input item is hidden. Is it 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>

php javascript combobox

asked by anonymous 10.08.2018 / 17:16

1 answer

Design layout Xamarin Android bugged Visual Studio 2017 Colors in Mac OS X Terminal

score 0 · Answer 1

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><scriptsrc="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" >

Hope it helps