使用 js 动态应用 css 对 html 代码的更改

Question

情况是这样

我的 html 代码中有一个 select 元素，有很多选项。这些选项之一是“其他”。我想要的是，当我 select “其他”时，在不刷新页面的情况下，在 select 一个带有 JS 的正下方显示一个输入元素。问题是我必须刷新页面才能看到更改。你能帮助我吗？ :)

这是我的代码：

<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>

提前致谢:)

Answer 1

您必须添加一个事件监听器。

let tribunal = document.getElementById("select-tribunal");
tribunal.addEventListener('change', showInput);
showInput({
  target: tribunal
});

function showInput(event) {
  if (event.target.value === '0') {
    document.getElementById('tribunal').style.visibility = 'visible';
  } else {
    document.getElementById('tribunal').style.visibility = 'hidden';
  }
}

<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="0" selected>Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">

Answer 2

由于 php 在服务器上是运行页面必须重新加载才能看到您需要使用 JavaScript 完成此任务的更改，因为您希望看到更改无需重新加载

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">

使用 js 动态应用 css 对 html 代码的更改

Dynamicly apply css changes on html code with js

javascript

html

dynamic

html-select