时间戳

首页 > 解决方案 > 根据选择显示 div

javascript - 根据选择显示 div

问题描述

首先，我以前从来没有真正玩过 Javascript，除了找到你聪明的类型创建的东西，然后将它添加到我的网站。

我想根据页面下拉菜单中选择的选项显示一个 div。

我有关税 1 - 4，选择的关税显示为 t1、t2、t3 和 t4，但 Divs 然后不可见。

我已经用一个简单的按钮测试了 div 位的显示/隐藏功能，并且效果很好，我似乎无法让它选择变量来显示被选中的那个。

<div>
                                Value Selected: <span id="current"></span>
                                <br>
                                <br>
                                <select id="select" name="options">
    <option>Choose Your Option</option>
    <option value="t1"> 1</option>
    <option value="t2"> 2</option>
    <option value="t3"> 3</option>
    <option value="t4"> 4</option>
</select>   
                            <div class="t1"><p>Tariff 1</p></div>
                            <div class="t2"><p>Tariff 2</p></div>
                            <div class="t3"><p>Tariff 3</p></div>
                            <div class="t4"><p>Tariff 4</p></div>
                        </div>

function showSelectedItem() {
    var item = document.getElementById("select").value;
   document.getElementById("current").innerHTML = item;
    
    if (item.style.display === 'none') {
    item.style.display = 'block';
  } else {
    item.style.display = 'none';
  }
    
}

document.getElementById("select").addEventListener("change", showSelectedItem);

那么所有 t1, t2... div 的 css 是

.t1 {显示：无}

在此先感谢，当您知道自己在看什么时，我怀疑它非常明显。

标签： javascript

解决方案

Youe css styles wont be avaliable with item.style.display. Only the inline styles will be available with the above selector.

Logic

  • Make all nodes hidden initially with style="display:none" in HTML
  • On change, check the selected value.
  • Hide all nodes with class name which is not same as selected value.
  • If you want to hide the dropdown when the user selects an option, you could select the dropdown with document.getElementById("select") and set style.display = 'none'

function showSelectedItem() {
  var item = document.getElementById("select").value;
  document.getElementById("current").innerHTML = item;
  const classes = ['t1', 't2', 't3', 't4'];
  // Toggle visibility;
  classes.forEach((classNode) => {
    document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
  });
  // Hide the dropdown when the user selects an option
  document.getElementById("select").style.display = "none";
}
document.getElementById("select").addEventListener("change", showSelectedItem);
<div>
  Value Selected: <span id="current"></span>
  <br>
  <br>
  <select id="select" name="options">
    <option>Choose Your Option</option>
    <option value="t1"> 1</option>
    <option value="t2"> 2</option>
    <option value="t3"> 3</option>
    <option value="t4"> 4</option>
  </select>
  <div class="t1" style="display: none;">
    <p>Tariff 1</p>
  </div>
  <div class="t2" style="display: none;">
    <p>Tariff 2</p>
  </div>
  <div class="t3" style="display: none;">
    <p>Tariff 3</p>
  </div>
  <div class="t4" style="display: none;">
    <p>Tariff 4</p>
  </div>
</div>

If you want the css styles also to be reflfced with your script, you have to make use of Window.getComputedStyle() Reference

function showSelectedItem() {
  var item = document.getElementById("select").value;
  document.getElementById("current").innerHTML = item;
  const selectedNode = document.querySelector(`.${item}`);
  if (selectedNode) {
    const displayValue = window.getComputedStyle(selectedNode).display;
    const classes = ['t1', 't2', 't3', 't4'];
    classes.forEach((classNode) => {
      document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
    });
    // Hide the dropdown when the user selects an option
    document.getElementById("select").style.display = "none";
  }
}
document.getElementById("select").addEventListener("change", showSelectedItem);
.t1, .t2, .t3, .t4 {
  display: none;
}
<div>
  Value Selected: <span id="current"></span>
  <br>
  <br>
  <select id="select" name="options">
    <option>Choose Your Option</option>
    <option value="t1"> 1</option>
    <option value="t2"> 2</option>
    <option value="t3"> 3</option>
    <option value="t4"> 4</option>
  </select>
  <div class="t1">
    <p>Tariff 1</p>
  </div>
  <div class="t2">
    <p>Tariff 2</p>
  </div>
  <div class="t3">
    <p>Tariff 3</p>
  </div>
  <div class="t4">
    <p>Tariff 4</p>
  </div>
</div>

推荐阅读