时间戳

首页 > 解决方案 > 读取当前选项时，选择 HTML 选择结果为空

javascript - 读取当前选项时，选择 HTML 选择结果为空

问题描述

如果选择 DVD 光盘，我会尝试用类家具或书籍隐藏元素。我想动态地做到这一点，但在控制台中，它显示它Cannot read property 'value' of null但是，每个选项都有一个值，这很奇怪。当然，正因为如此，什么都没有改变

HTML 选择代码：

<div class="iRow">
                <div class="lclass"> <label for="typeselector">Product Category</label> </div>
                <div class="tclass"> 
                    <select id="typeselector" name="productoptions">
                        <option value="DVD">DVD-Disc</option>
                        <option value="Book">Book</option>
                        <option value="Furniture">Furniture</option>
                    </select>
                </div>
            </div>

JS代码：

<script> 
var opt = document.getElementById("typeselector");
console.log(opt.value);
if(opt === "DVD-Disc")
{
    console.log(document.getElementsByClassName("furniture"));
    document.getElementsByClassName("furniture").style.display = "none";
    document.getElementsByClassName("book").style.display = "none";

}
 </script>

标签： javascripthtml

解决方案

有几个问题：

  1. getElementsByClassName返回一个列表，因此，您循环遍历每个元素并将其隐藏
  2. 问题中没有此类类的元素
  3. 你应该比较的值select

var opt = document.getElementById("typeselector");
if(opt.value === "DVD")
{
    let furnitures = document.getElementsByClassName("furniture");
    for(let i = 0; i < furnitures.length; i++)
         furnitures[i].style.display = "none";
    let books = document.getElementsByClassName("book");
    for(let i = 0; i < books.length; i++)
         books[i].style.display = "none";
}
<div class="iRow">
     <div class="lclass"> 
          <label for="typeselector">Product Category</label> 
     </div>
     <div class="tclass"> 
          <select id="typeselector" name="productoptions">
               <option value="DVD">DVD-Disc</option>
               <option value="Book">Book</option>
               <option value="Furniture">Furniture</option>
          </select>
     </div>
</div>

<div class="book">Book 1</div>
<div class="book">Book 2</div>

<div class="furniture">furniture 1</div>
<div class="furniture">furniture 1</div>

正确的方法是在以下位置设置一个监听器select：

var opt = document.getElementById("typeselector");
opt.addEventListener("change", function(){
     console.log(this.value)
     if(this.value === "DVD"){
          let furnitures = document.getElementsByClassName("furniture");
          for(let i = 0; i < furnitures.length; i++)
               furnitures[i].style.display = "none";
          let books = document.getElementsByClassName("book");
          for(let i = 0; i < books.length; i++)
               books[i].style.display = "none";
     }
});
<div class="iRow">
     <div class="lclass"> 
          <label for="typeselector">Product Category</label> 
     </div>
     <div class="tclass"> 
          <select id="typeselector" name="productoptions">
               <option value="DVD">DVD-Disc</option>
               <option class="book" value="Book">Book</option>
               <option class="furniture" value="Furniture">Furniture</option>
          </select>
     </div>
</div>

推荐阅读