Dynamicly apply css changes on html code with js

Question

here's the situation

I have a select element in my html code, with many option. One of these options is "Other". What I want is, when I select "Other", without refreshing the page, display an input element right under the select one with JS. The problem is that I have to refresh the page to see the change. Can you help me? :)

There's my code :

<label for="select-tribunal" class="form-label">Cadre Légal</label>
            <select id="select-tribunal" required class="form-select" aria-label="Default select example">
                <?php
                foreach ($tribunaux as $tribunal){
                    echo '<option value="'.$tribunal['id'].'">'.$tribunal['nom'].'</option>';
                }
                ?>
                <option value="0">Autre Tribunal</option>
            </select>
                <input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">
            <script>
                var tribunal = document.getElementById("select-tribunal");
                    if (tribunal.options[tribunal.selectedIndex].value === '0') {
                        document.getElementById('tribunal').style.visibility = 'visible';
                    } else  {
                        document.getElementById('tribunal').style.visibility = 'hidden';
                    }
            </script>

Thanks in advance :)

Answer 1

Since php is running on server the page have to reload in order to see the changes you need to use JavaScript for for this task since you want to see the changes without reload

var select = document.querySelector("#mySelect");
var input = document.querySelector("#myInput");
select.addEventListener("change", function(event){
  if(event.target.value === "other"){
    input.style.display="block"
  }else{
    input.style.display="none" 
  }
})

<select id="mySelect">
    <option value="a">A</option>
    <option value="a">B</option>
    <option value="c">C</option>
    <option value="other">Other</option>
</select>
<input style="display: none" type="text" id="myInput">