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

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隐藏。

在你的select中做出选择后，你的JS会显示其中的一个