如何从下拉菜单中获取选定的选项？答案

【问题标题】：how to get selected option from dropdown menu?如何从下拉菜单中获取选定的选项？
【发布时间】：2018-02-05 19:07:03
【问题描述】：

我在 html 中有一个下拉列表

<select id="dropdown">
    <option value="text">Text</option>
    <option value="graphic">Graphic</option>
    <option value="formula">Formula</option>
    <option value="title">Title</option>
</select>

我正在尝试通过调用函数从菜单中获取选定的选项。我尝试了两种选择：
1.我尝试使用 onclick - 问题是，当我点击下拉按钮但在选择任何选项之前触发了我的函数调用。
2.所以我使用onchange来调用我的函数，但是当我使用它时，如果我想连续使用相同的选项，则不会触发函数调用，因为顾名思义，函数仅在选项更改时调用。
有没有其他方法可以让我获得选定的选项？

这是我的脚本-

...  
document.addEventListener('DOMContentLoaded',function() {   document.querySelector('select[name="zonelist"]').onclick=getSelectedTextValue;
},false);  
...  
function getSelectedTextValue(){}  
...

【问题讨论】：

你也可以处理onblur事件
Get selected value in dropdown list using JavaScript?的可能重复
您对选定的选项做了什么，如果相同的选项保持选中状态，则需要调用该函数？如果在之前的交互中调用了它，并且没有任何变化，我不明白为什么要调用该函数，或者您只是希望在页面加载时调用的函数显示默认选项？

标签： javascript html

【解决方案1】：

为其添加一个标志，并使用点击事件。

在<select>外点可能不行，但是可以针对这种情况做处理。

var open = false;

document.getElementById('dropdown').addEventListener('click', function(e){
  open = !open;
  if(!open){
    console.log(this.options[this.selectedIndex].text)
  }
});

//check if click outside 
window.addEventListener('click', function(e){   
  if (!document.getElementById('dropdown').contains(e.target)){
    open = false;
  }
});

<select id="dropdown">
    <option value="text">Text</option>
    <option value="graphic">Graphic</option>
    <option value="formula">Formula</option>
    <option value="title">Title</option>
</select>

【讨论】：