I have 3 buttons outside of the form tag and when clicking on any of them, I need the value to be selected in the select, follow image and code for better understanding:
Buttons (outside tag form)
<div class="botoes_action">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="">
<button class="botao_preto waves-effect waves-light">
Compre 3 unidades
<b>
receba 1 de brinde
</b>
</button>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="">
<button class="botao_vermelho waves-effect waves-light">
Compre 5 unidades
<b>
receba 2 de brinde
</b>
</button>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="">
<button class="botao_verde waves-effect waves-light">
Compre 10 unidades
<b>
receba 5 de brinde
</b>
</button>
</a>
</div>
</div>
<form class="formulario_area" action="#" id="form_envio" method="post">
<div class="row">
<div class="input-field col m12 s12 paddingNone">
<input type="text" class="form-control box_form" required="" id="nome" name="nome" placeholder="Nome Completo">
</div>
<div class="input-field col m12 s12 paddingNone">
<input type="text" class="form-control box_form" required="" id="email" name="email" placeholder="E-mail">
</div>
<div class="input-field col m12 s12 paddingNone paddingL">
<input type="text" class="form-control box_form" required="" id="telefone" name="telefone" placeholder="Telefone">
</div>
<div class=" col m6 s12 paddingNone paddingL">
<select name="estado" class="form-control box_form" required="" id="estado" onchange="mudaCidade($(this).val());">
</select>
</div>
<div class="col m6 s12 paddingNone paddingL">
<select name="cidade" class="form-control box_form" required="" id="cidade">
<option value="cidade">Cidade</option>
</select>
</div>
<div class="form-group col m12 s12 paddingNone paddingL">
<select name="pacote" class="form-control box_form" required="" id="pacote">
<option value="" selected="" disabled="">Escolha uma unidade</option>
<option value="3">3 Unidades</option>
<option value="5">5 Unidades</option>
<option value="10">10 Unidades</option>
</select>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 send_btn">
<button class="waves-effect waves-light btn button_send" data-loading-text="Aguarde..." type="submit">
Enviar
</button>
</div>
</form>
When I click on one of the three buttons, I need the last form field to be pre-selected. But I have no idea how I can do this; Has anyone ever had to do something similar and can you pass any tips?