下拉选择包含 div 点击纯 javascript答案

【问题标题】：dropdown select on containing div click pure javascript下拉选择包含 div 点击纯 javascript
【发布时间】：2017-12-23 06:04:00
【问题描述】：

<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>

我有一个包含选择选项的 div。 div 大于选择框。使用纯 javascript 解决方案，我希望在选择框区域外单击包含 div 时发生选择下拉菜单。我找到的唯一解决方案是 jquery，我正在寻找纯 JavaScript 解决方案。

我不需要确切的代码（但它有帮助），因为我不太擅长 javascript，所以请完整解释任何答案。

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

【问题讨论】：

如果有多个选项会选择哪个选项？
select dropdown to happen是什么意思？你的意思是打开选择选项？
只要下拉菜单发生，选择的选项就无关紧要，因为 div 是一个容器 - 所以选择/选项将正常工作。更新了 jsfiddle 以使其更加清晰。 jsfiddle.net/m6s5j9sj/2
brk - 正是我希望选择的下拉菜单显示选项，就像单击选择一样。
你以前可以用 initMouseEvent 来做到这一点，但据我所知，它是no longer possible/not good practice

标签： javascript html css

【解决方案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>

【讨论】：