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大于选择框。使用纯JavaScript解决方案，我希望在选择框区域外单击包含div时发生选择下拉列表。我找到的唯一解决方案是jquery，我正在寻求一个纯粹的JavaScript解决方案。

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

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

Answer 1

可能没有一种简单的方法，但您可以尝试设置size＆amp; length。问题是它只有在长度大于1时才有效。因此在演示中我创建了另一个选项＆＃39;选择＆＃39;。在您的应用程序中，有多个选项

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

下拉选择包含div单击纯javascript

1 个答案: