时间戳

首页 > 解决方案 > JS 找不到 HTML 选择

javascript - JS 找不到 HTML 选择

问题描述

我正在尝试使用 javascript 选择 HTML 选择。但它似乎没有找到一个。我已经在网上尝试了一些关于这个问题的答案，例如：

等待窗口完全加载：

window.onload = function(){
    var opt = document.getElementsByName("productoptions");

    console.log(opt.options);
}

并试图将 js 放在 select 元素之后。是的，我已经检查了很多次拼写。我想知道，为什么会这样。每次它都把我扔进控制台 - 未定义。也许你知道答案；）

当前的JS代码：

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";
}

部分HTML代码，负责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>

标签： javascripthtmldomdom-manipulation

解决方案

document.getElementsByName 返回数组，所以使用 opt[0]

window.onload = function(){
    var opt = document.getElementsByName("productoptions");

    console.log(opt[0].options);
}
<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>

推荐阅读