dropdown select on containing div click pure 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>

I have a div containing a select option. The div is larger than the select box. Using a pure javascript solution, I would like the select dropdown to happen when the containing div is clicked outside the select box area. The only solutions I have found are jquery and I am seeking a pure javascript solution.

I don't need exact code (but it helps) as I am not very good with javascript so please explain any answer completely.

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

`select dropdown to happen` what does it mean?Do you mean to open the select options? — brk, Dec 23 '17 at 06:08
The option selected shouldn't matter so long as the dropdown happens, as the div is a container - so the select/option would work as normal. Updated the jsfiddle to make this a little more clear. https://jsfiddle.net/m6s5j9sj/2/ — Bruce, Dec 23 '17 at 06:09
brk - exactly I waant the dropdown of the select displaying the options just as if the select was clicked. — Bruce, Dec 23 '17 at 06:11
You used to be able to do this with initMouseEvent but as far as I know, it is [no longer possible/not good practice](https://stackoverflow.com/a/39635285/9119977) — roctothorpe, Dec 23 '17 at 06:23

score 2 · Answer 1 · answered Dec 23 '17 at 06:40

There may not be a simple way but you can try to set the size & length. The catch is it will only work if length is greater than 1. So in the demo I have created another option 'Select'.Hopefully in your application there will be multiple option

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>

dropdown select on containing div click pure javascript

1 Answers1