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

【问题标题】：Dynamicly apply css changes on html code with js使用 js 对 html 代码动态应用 css 更改
【发布时间】：2022-02-10 16:52:40
【问题描述】：

情况是这样的

我的 html 代码中有一个选择元素，有很多选项。这些选项之一是“其他”。我想要的是，当我选择“其他”时，在不刷新页面的情况下，在带有 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>

提前致谢:)

【问题讨论】：

标签： javascript html dynamic html-select

【解决方案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">

【讨论】：

工作正常，谢谢！！

【解决方案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">

【讨论】：

工作正常，谢谢:)
如果预先选择了其他，则无法正常工作。您还需要在值更改发生之前运行事件监听器的逻辑。