How to create a snap button to get the selected value in a form-control in PHP

Question

I have a form-control that carries a dropdown. What I need is a button in front of this dropdown that when selecting an item of his, click the button, the selected value of the dropdown is stored in some variable. Or some way when selecting a value in the dropdown this value is stored in an automatic variable and when changing the selected item in the dropdown the value of the variable also changes.

For example, in the image below we have my dropdown.

If we look at the HTML of this dropdown, we have this

<select class="form-control" id="colaborador" name="colaborador">
<option value="">-</option>
<option value="117">117-GABRIELA</option>
<option value="144">144-GUILHERME</option>
<option value="12">12-KATHIA</option>                                                            
</select>

What I need is that when selecting, for example, "114-Guilherme", and clicking the "Load" button, its value is stored in a variable, that is, the variable should receive 144.

This is my PHP code that loads the dropdown (if anyone needs it)

<div class="row">
    <div class="col-md-8 form-inline">
        <select class="form-control" id="colaborador" name="colaborador">
            <?php
                if($_GET['COLSEL'] == ""){
                    echo '<option value="">-</option>';
                }
                $RetornoColaborador = retornaColaboradorGestor(intval($_SESSION['emp']), intval($_SESSION['cad']));
                foreach($RetornoColaborador as $key => $value){
                    if($value['numcad'] == $_GET['COLSEL']){
                        echo "<option value=".$value['numcad']." selected>".$value['numcad'].'-'.$value['nomfun']."</option>";
                } else {
                    echo "<option value=".$value['numcad'].">".$value['numcad'].'-'.$value['nomfun']."</option>";
                    }
                }                                                                   
            ?>                                                            
        </select>
        <button class="btn btn-primary" id="btn-carregar">Carregar</button>                                                        
        <br/>
    </div>                                            
</div>

already I thank you.

Answer 1

It can be solved with Javascript:

1. Declare the variable;
2. Add a button click event;
3. By clicking on the button, retrieve the select via getElementById
4. Save the value of select in the variable

var colaborador;
document.getElementById('btn-carregar').addEventListener('click', function(){
  colaborador = document.getElementById('colaborador').value;
  alert('colaborador é: '+colaborador);
});

    <select class="form-control" id="colaborador" name="colaborador">
    <option value="">-</option>
    <option value="117">117-GABRIELA</option>
    <option value="144">144-GUILHERME</option>
    <option value="12">12-KATHIA</option>                                                        
    </select>
<button class="btn btn-primary" id="btn-carregar">Carregar</button>