根据所选内容生成div

Question

首先，我从来没有真正玩过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.迪夫

.t1 {display: none}

预先谢谢，当你知道你在看什么的时候，我怀疑这是很明显的事情。

Answer 1

你的css样式不会与item.style.display相适应。上面的选择器只提供内联样式。

逻辑

• 使用style="display:none"使所有节点最初隐藏在HTML中
• 在更改时，检查选定的值。
• 隐藏所有具有与选定值不相同的类名的节点。
• 如果要在用户选择选项时隐藏下拉列表，可以使用document.getElementById("select")选择下拉列表并设置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>

​

如果您希望css样式也与您的脚本进行反射，则必须使用Window.getComputedStyle() 参考文献。

​

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>

​

Answer 2

您需要比较div的显示属性，而不是下拉列表的值。

var item = document.getElementById("select").value;
var dv = document.querySelector("."+item);
document.getElementById("current").innerHTML = item;

if (dv.style.display === 'none') {
    dv.style.display = 'block';
} else {
    dv.style.display = 'none';
}

https://jsfiddle.net/palak6041/9wj07ebv/17/

这将不会隐藏其他div，尽管您需要使用其他代码来隐藏它。

下面的示例将隐藏其他div，只有选中的div是可见的。

https://jsfiddle.net/palak6041/9wj07ebv/25/