Question

当我使用alert(el2.getAttribute("class"));时，为什么警报会显示正确的值（即pl），但是当我使用alert(el2.getAttribute("value"));时它不会显示正确的值（这应该是每个选项的值，例如晴天......等等。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Allowance updater example</title>
      </head>
      <body>

      <label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="" class = "pl">--Make a choice--</option>
  <option value="sunny" class = "pl">Sunny</option>
  <option value="rainy" class = "pl">Rainy</option>
  <option value="snowing" class = "pl">Snowing</option>
  <option value="overcast" class = "pl">Overcast</option>
</select>

<p></p>
      <script>
          var el = document.querySelector("select");
          var el2 = document.querySelector("option");
          el.addEventListener("click", x);
          function x() {  
          alert(el2.getAttribute("value"));
        alert(el2.getAttribute("class"));
          }
      </script>
        </body>
</html>

Answer 1

应该是每个选项的值，例如晴天......等等。

没有。它应该是e2中存储的特定元素的value属性。

var el2 = document.querySelector("option");

...这就是文档中的第一个选项元素。

<option value="" class = "pl">

...这是一个空字符串。

如果你想获得所有选项，那么你需要让它们全部（querySelectorAll），然后循环生成的元素列表，就像它是一个数组一样。

Answer 2

你不能喜欢这个吗？

<script>
      var el = document.querySelector("select");
      el.addEventListener("change", x);
      function x() {  
        alert(el.value);
      }
</script>

Javascript - 为什么getAttribute（）函数不能用于某些属性？

2 个答案: