set field select as result field of a field

Question

Guys this is my first question, I have a form and I would like to fill in the select field as the result of another field. Ex: I have a field called away, then the user goes there and type a value ex: 10, I would like the select field to be filled with value 0 for example, if the user enters in the field away a value between 0 and 10 sets a value in select if you set between 11 and 20 set another value in select and so on. can help me please?

<form method="POST" action="processa_cad.php">
    <h1>Cadastrar</h1>
    <div class="form-group">
        <label>Nome: </label>
        <input type="text" name="name" class="form-control" placeholder="Nome da Empresa ou Filial">
    </div>
    <div class="form-group">
        <label>Endereço: </label>
        <input type="text" name="address" class="form-control" placeholder="Digite o número e o Logradouro">
    </div>
    <div class="form-group">
        <label>Latitude: </label>
        <input type="text" name="lat" class="form-control" placeholder="Digite a latitude">
    </div>
    <div class="form-group">
        <label>Longitude: </label>
        <input type="text" name="lng" class="form-control" placeholder="Digite a mensagem"> 
    </div>
    <div class="form-group">
        <label>Afastados (%): </label>
        <input type="text" name="afastado" class="form-control" placeholder="Percentual de pessoas afastadas">
    </div>
    <div class="form-group">
        <label>Níveis de Risco: </label>
        <select required id="type" name="type" class="form-control">
            <option value="">Selecione nível de risco ...</option>
            <option value="0">Normal</option>
            <option value="1">10% do efetivo baixado</option>
            <option value="2">30% do efetivo baixado</option>
            <option value="3">50% do efetivo baixado</option>
        </select>
    </div>
    <div class="form-group">
        <label>Estado</label>
        <select name="estado_id" id="estado_id" class="form-control">
            <option value="">Selecione</option>
                        <?php
                            $result_estado = "SELECT * FROM estados est ORDER BY estado_nome ASC";
                            $resultado_estado = mysqli_query($conn, $result_estado);
                            while($row_estado = mysqli_fetch_array($resultado_estado)){
                                echo '<option value="'.$row_estado['id'].'">'.$row_estado['estado_nome'].'</option>';

                            }

                        ?>

        </select>
    </div>
    <br><br>
    <div class="row">
    <div id="btn-cadastrar" class="form-group col-md-5 offset-md-5">
        <button type="submit" class="btn btn-primary" id="btn-cadastrar">Cadastrar</button>
    </div>
</div>

Answer 1

The only thing I can quote is that it defines a id for the element you want to reference because the attribute id specifies the unique identifier of your element and can be referenced in javascript by document.getElementById() and that the event 'input' is triggered when the display value of an element <input>, <select>, or <textarea> is amended.

The rest is trivial code that can be explained in the comments themselves:

//Somente após o formulário estar carregado.
window.addEventListener("load", () => {

  let box = document.getElementById("afastado"); //Obtem a refrencia para <input id="afastado">.

  let select = document.getElementById("type"); //Obtem a refrencia para <select id="type">.

  //Quando houver uma mudança em box
  box.addEventListener("input", (e) => {
    val = parseFloat(box.value); //Obtem o valor atual de box e converte para float.

    //Testa sequencialmente algumas condições para ver se são verdadeiras e caso sim altera o valor de select.  
    switch (true) {
      case val <= 10:
        select.value = 0;
        break;
      case val <= 20:
        select.value = 1;
        break;
      case val <= 30:
        select.value = 2;
        break;
      case val <= 40:
        select.value = 3;
        break;
      default: //Se nenhuma condição for atendida
        select.value = "";
    }

  });

});

<div class="form-group">
  <label>Afastados (%): </label>
  <input type="text" id="afastado" name="afastado" class="form-control" placeholder="Percentual de pessoas afastadas">
</div>
<div class="form-group">
  <label>Níveis de Risco: </label>
  <select required id="type" name="type" class="form-control">
    <option value="">Selecione nível de risco ...</option>
    <option value="0">Normal</option>
    <option value="1">10% do efetivo baixado</option>
    <option value="2">30% do efetivo baixado</option>
    <option value="3">50% do efetivo baixado</option>
  </select>
</div>