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.so我使用 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>

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

1 个答案: