javascript - 获取单击的下拉元素的文本内容的标准方法不起作用

Question

我有一个简单的下拉列表，似乎无法获取单击元素的文本内容。应该相当简单，但显然人们可以从中得出一门科学。因此，任何帮助将不胜感激。

document.querySelector('#myDropdown').addEventListener('click', function() { 

    console.log(this.textContent); 
    var er = document.querySelector("#myDropdown");
	  var result = er.value;
	  console.log(result);
	
	  var e = document.getElementById("myDropdown");
    var text = e.options[e.selectedIndex].text;
    console.log(text);
    
})

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <a>Link 1</a>
      <a>Link 2</a>
      <a>Link 3</a>
    </div>
  </div>
</div>

第一个控制台日志记录下拉列表的所有元素，第二个“未定义”，第三个记录“未捕获的类型错误”。是因为我的下拉列表不是用传统的选择/选项样式制作的吗？谢谢，周日愉快。

Answer 1

在事件监听器内，即 function , this其内部将引用监听器附加到的元素。在这里，那就是 #myDropdown <div> .

e.options[e.selectedIndex]该方法仅适用于 <select> s。

如果您想确定单击了哪个链接，请首先确保 event.target (被点击的元素)是 <a> ，然后提取event.target的textContent :

document.querySelector('#myDropdown').addEventListener('click', function(event) {
  if (event.target.matches('a')) {
    console.log(event.target.textContent);
  }
})

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <a>Link 1</a>
      <a>Link 2</a>
      <a>Link 3</a>
    </div>
  </div>
</div>

您确实需要检查单击的元素是否为 <a>首先 - 否则，点击 #myDropdown但不是在内<a>也会产生你不想要的日志。