下拉選擇包含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>

我有一個包含選擇選項的div。 div大於選擇框。 使用純JavaScript解決方案，我希望在選擇框區域外單擊包含div時發生選擇下拉列表。 我找到的唯一解決方案是jquery，我正在尋求一個純粹的JavaScript解決方案。

我不需要確切的代碼（但它有幫助），因為我對javascript不太好，所以請完整解釋任何答案。

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

Answer 1

可能沒有一種簡單的方法，但您可以嘗試設置size和length 。 問題是它只有在長度大於1時才能工作。所以在演示中我創建了另一個選項'Select'。在你的應用程序中有多個選項

 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>