Question

只需要一些我无法找到答案的帮助。我有一个HTML下拉菜单，应该在下拉选择时显示一个与图像相关联的div。问题是，目前，它会在页面打开时加载每个div，并且只在选择时隐藏div。我想在实际选择之前没有任何显示，如果这是有道理的。以下是我到目前为止（为问题而简化）：

<select onchange="toggle_form_element(this)" name="parts" id="parts">
  <option value="-">Please choose an image</option>
  <option value="0">img 1</option>
  <option value="1">img 2</option>
  <option value="2">img 3</option>
</select>
<span id="dropdown">
  <div id="img1">image 1.jpg</div>
  <div id="img2">image 2.jpg</div>
  <div id="img3">image 3.jpg</div>
</span>

<script type="text/javascript">
  function toggle_form_element(select) {
    var divSelect = select.value;
    var elements = dropdown.getElementsByTagName("div");
      for (var i = 0; i < elements.length; i++) {
        if (i == divSelect) {
          elements[i].style.display = "block";
        } else {
          elements[i].style.display = "none";
        }
      }
  }
</script>

非常感谢任何帮助。谢谢！

Answer 1

将此添加到您的样式

<style>
#dropdown .image
{
    display: none;
}
</style>

然后在元素中添加一个类：

<div id="img1" class="image">image 1.jpg</div>
<div id="img2" class="image">image 2.jpg</div>
<div id="img3" class="image">image 3.jpg</div>

因此，开始时图像将被CSS隐藏。

在您的选择中做出选择后，您的JS将显示其中一个。

下拉菜单变量div显示在页面加载

1 个答案: