How to enable manual typing by selecting the other option in Form-Select

Question

I am developing a registration form and added a Form-Select field to know what the Position of employees (Secretary / Advisor) company. However, when selecting the option others would like to enable a field for manual typing of the post.

*CODE

<div class="mb-3 col-sm-3">
        <label for="cargo">Cargo</label>
            <select class="form-select" name ="cargo">
            <option value="1">Secretário</option>
            <option value="2">Assessor</option>
            <option value="3">Outros</option>
        </select>
</div>


if ($_POST["cargo"] == 3){
echo                   
    <label for="3"></label>
    <input type="text" class="form-control" name ="3">
    }

Answer 1

I was able to solve it this way:

I added the <input type="text" class="form-control"> inside a div FATHER and, through a file stylesheet.css removed, teporarially, it.

#pai div{
    display: none;
}

And, through Javascript, I created the rules below:

$(document).ready(function(){

    $('#cargo').on('change', function(){

        var selectValor = '#' +$(this).val();

        $('#pai').children('div').hide();
        $('#pai').children(selectValor).show();

    });
});

Thus, the div PAI that is temporarily removed will appear when the value of the office selected is equal to the value of the PAI div.

Answer 2

You can do this using javascript.

cargoSelect.addEventListener('change', function (e) {
  let element =  document.getElementById('outrosInput');
  if (e.target.value === "3") {
    element.type = 'text';
    element.disabled = false;
  } else {
    element.type = 'hidden';
    element.disabled = true;
  }
});

        <select id="cargoSelect" class="form-select" name ="cargo">
            <option value="1">Secretário</option>
            <option value="2">Assessor</option>
            <option value="3">Outros</option>
        </select>
        <br>
        <br>
        <input  type="hidden" id="outrosInput">