html 根据下拉菜单选择显示特定的依据

brqmpdu1  于 2022-12-09  发布在  其他
关注(0)|答案(2)|浏览(225)

我在这里创建了静态更改。我在HTML中创建了一个下拉菜单,其中包含两个选项:One和Two。如果用户选择One,则“x”应该显示一次。如果用户选择Two,则“xx”应该显示一次。但是,在用户选择菜单选项之前和之后,“x”和“xx”都显示在页面上。如何在HTML代码周围创建类似条件的环境?
下面是我编写的代码,试图根据用户的选择使显示场景显示“x”或“x”。前六行包含下拉菜单的代码:

<div>
  <select id="options-in-menu">
    <option value="one">One</option>
    <option value="two">Two</option>
  </select>
</div>

<div id="selected-option">
  <div id="one">
    <p>x</p>
  </div>
  <div id="two">
    <p>xx</p>
  </div>
</div>

实际结果包括空白页。

cotxawn7

cotxawn71#

你可以使用javascript来实现这个功能。我已经为你添加了示例代码,你可以通过查看它来继续。我用javascript编写了myFunction。我用onchange函数运行了myFunction。它在每次发生变化时都起作用,并改变了div的显示属性。

<div>
  <select id="options-in-menu" onchange="myFunction()">
    <option value="one">One</option>
    <option value="two">Two</option>
  </select>
</div>

<div id="selected-option">
  <div id="one">
    <p>x</p>
  </div>
  <div id="two">
    <p>xx</p>
  </div>
</div>

<script>
function myFunction() {
  var val = document.getElementById("options-in-menu").value;
  document.getElementById("one").style.display = "none";
  document.getElementById("two").style.display = "none";
  document.getElementById(val).style.display = "block";
}
</script>
bqucvtff

bqucvtff2#

如果你可以使用JS,这应该工作:

<div>
  <select id="options-in-menu" onchange="optionChange()">
    <option value="one">One</option>
    <option value="two">Two</option>
  </select>
</div>

<div id="selected-option">
  <div id="one">
    <p>x</p>
  </div>
  <div id="two">
    <p>xx</p>
  </div>
</div>

<script>
    let elSelectedOption = document.getElementById("selected-option");
    let elOptionsInMenu = document.getElementById("options-in-menu");
    function optionChange() {
        for (var child of elSelectedOption.children) {
            child.style.display = "none";
        }
        document.getElementById(elOptionsInMenu.value).style.display = "block";
    }
</script>

我们将所有元素的显示样式设置为none,然后将id与所选值相同的元素设置为block,并且不立即更新它以显示两者。当用户从下拉列表中选择某个内容时,onchange事件被触发。

相关问题