Show and hide SELECT-based field

Question

I developed a PHP code that queries a database table and inserts the values into one select in HTML.

Once the user does not find the desired option within this select, he must select the option "Instituição não encontrada" and then a label (id="lblCadastrarInstituicao") and a input (id="cadastrarInstituicao") should no longer be hidden. If the user selects the option "Instituição não encontrada" and then switch to another option, the label and the input that I mentioned should return to the hidden mode.

I have a similar function on another page and it works normally, the only difference is that the other page does not make this database query. On this page the code is working in different ways in different browsers, even though I am not storing cache.

In Mozilla Firefox, the system removes the label in the hidden way, but the input no. If I change to a different option than "Instituição não encontrada", the label does not return to hidden mode.

In Google Chrome, the system is not taking out even the label nor the input hidden mode, independent of the selected option.

I checked several publications of Stack Overflow PT and other sites to understand what is wrong, but I could not identify the problem.

The Javascript function follows below:

function cadastrarInstituicao() {
//Abre a função que mostra o campo CadastrarInstituicao se a opção "Instituição não encontrada" no select instituicao.
    var instituicao = document.getElementById("instituicao").value;
    if (instituicao === 'novaInstituicao') {
        document.getElementById("cadastrarInstituicao").style.display = "block";
        document.getElementById("lblCadastrarInstituicao").style.display = "block";
    } else {
        document.getElementById("cadastrarInstituicao").style.display = "none";
        document.getElementById("lblCadastrarInstituicao").style.display = "none";
    }
}//Fecha a função

PHP/HTML code:

<label for="instituicao">A unidade pertence a qual instituição?</label>
                    <select name="instituicao" id="instituicao">
                        <!-- Transforma o valor da variável $instituicao em um array e armazena esse array na variável $while. Será criado um option para cada registro na tabela instituicao.  -->
                        <?php while($while = $instituicao->fetch_array()) { ?>
                            <option value="<?php echo $while["id_instituicao"]?>" onclick="cadastrarInstituicao();"> <?php echo $while["nome"]?> </option>
                        <?php }?>
                        <!-- Fazer com que ao selecionar "Cadastrar nova Instituição" seja ativada a função cadastrarInstituicao().-->
                        <option id="novaInstituicao" value="novaInstituicao" onclick="cadastrarInstituicao();">Instituição não encontrada</option>
                    </select><br>

                <label id="lblCadastrarInstituicao" for="CadastrarInstituicao" style="display: none;">Cadastrar Instituição</label>
                    <input type="text" name="cadastrarInstituicao" id="cadastrarInstituicao" style="display: none;"><br><br>

Answer 1

As commented by colleague Julio Neto, you can enter the function directly in the event onchange of the element select. See the example below:

function cadastrarInstituicao() {
    var instituicao = document.getElementById("instituicao").value;

    if (instituicao === 'novaInstituicao') {
        document.getElementById("cadastrarInstituicao").style.display = "block";
        document.getElementById("lblCadastrarInstituicao").style.display = "block";
    } else {
        document.getElementById("cadastrarInstituicao").style.display = "none";
        document.getElementById("lblCadastrarInstituicao").style.display = "none";
    }
}

<label for="instituicao">A unidade pertence a qual instituição?</label>
<select name="instituicao" id="instituicao" onchange="cadastrarInstituicao()">
    <option value="1">Instituição 1</option>
    <option value="2">Instituição 2</option>
    <option value="3">Instituição 3</option>
    <option id="novaInstituicao" value="novaInstituicao">Instituição não encontrada</option>
</select><br>

<label id="lblCadastrarInstituicao" for="CadastrarInstituicao" style="display: none;">Cadastrar Instituição</label>
<input type="text" name="cadastrarInstituicao" id="cadastrarInstituicao" style="display: none;"><br><br>

Note that PHP code has no influence on the problem, so in the next questions, try to be more precise in what you need. If the problem is with HTML or Javascript, post only the HTML and Javascript codes. With PHP code we have no way to reproduce the problem, which makes the answer difficult.

Answer 2

Put label and input inside a div

window.onload=function(){
document.getElementById('instituicao').addEventListener('change', function () {
    var style = this.value == 'novaInstituicao' ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
});
}

<label for="instituicao">A unidade pertence a qual instituição?</label>
<select name="instituicao" id="instituicao">
    <option value="1">Instituição 1</option>
    <option value="2">Instituição 2</option>
    <option value="3">Instituição 3</option>
    <option id="novaInstituicao" value="novaInstituicao">Instituição não encontrada</option>
</select><br>

<div id="hidden_div" style="display: none;">
<label id="lblCadastrarInstituicao" for="CadastrarInstituicao">Cadastrar Instituição</label>
<input type="text" name="cadastrarInstituicao" id="cadastrarInstituicao"><br><br>
</div>