JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // pegando o link
    var link = '';
    link = $('#link_aplicar').attr('href');
    
    $("select.sala").change(function(){
        var selectedSala = '';
        // pegando o value do option selecionado
        selectedSala = $(this).children("option:selected").val();
        alert("Sala selecionada - " + selectedSala);
        // adicionando a sala ao link
        var newLink = '';
        newLink = link + selectedSala;
        // setando novo link
        $('#link_aplicar').attr('href', newLink);
        alert($('#link_aplicar').attr('href'));
 });
});
</script>
</head> 
<body>
   <form>
        <label>Designação da sala</label>
         <br/>
        <select name="designacaoSala" class="form-control sala">
            <option value="1">Sala 1</option>
            <option value="2">Sala 2</option>
            <option value="3">Sala 3</option>
        </select>
        
        <div class="col-xs-12 col-md-4" style="margin-left:-25px;">
            <label>Aplicar</label>
            <br/>
            <a id="link_aplicar" href="utilizador/addSalaEspacoEvento/?numerosala=">
                <button class="form-control"><i class="fa fa-check"></i></button>
            </a>
        </div>
  </form>
</body>
</html>