点击包含 div 时纯 JavaScript 下拉选择

Question

<div class="container">
  <select class="form_select">
    <option>the option</option>
  </select>
</div>

<style>
  .container {
    width: 300px;
    border:1px solid blue;
  }
  select {
    max-width:50px;
  }
</style>

我有一个包含select选项的div。这个div比select框大。使用纯javascript方案，我希望当在select框区域外单击包含div时发生下拉选择。我找到的唯一解决方案都是jquery，我正在寻求一个纯javascript解决方案。 我不需要精确的代码（但它有帮助），因为我对javascript不是很熟悉，所以请完全解释任何答案。

https://jsfiddle.net/m6s5j9sj/1/

- Bruce

---

如果有多个选项，哪个选项将被选择？ - brk

选择下拉框发生什么意思？您是指打开选择选项吗？ - brk

只要下拉菜单出现，选择的选项不应该有影响，因为 div 是一个容器 - 因此 select/option 将像正常情况下一样工作。已更新 jsfiddle 以使其更加清晰。https://jsfiddle.net/m6s5j9sj/2/ - Bruce

brk - 我想要下拉选择框显示选项，就像单击了选择框一样。 - Bruce

你以前可以使用initMouseEvent来实现这个，但据我所知，它已经不再可能或者说不是一个好的做法了。 - roctothorpe

Answer 1

可能没有简单的方法，但您可以尝试设置size和length。但要注意的是，只有当长度大于1时才有效。因此，在演示中，我创建了另一个选项“选择”。希望在您的应用程序中会有多个选项。

document.getElementById('container').addEventListener('click', function(e) {
  var seleOpt = document.getElementsByClassName('form_select')[0];
  seleOpt.size = seleOpt.options.length;
})

.container {
  width: 300px;
  border: 1px solid blue;
}

select {
  max-width: 50px;
}

<div class="container" id="container">
  <select class="form_select">
        <option>Select</option>
        <option>the option</option>
    </select>
</div>

- brk