如何从下拉菜单中选择选项？

Question

我在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(){}  
...

Answer 1

向其添加一个标志，并使用click事件。

如果在<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>