I have 2 elements:

<span id="button" onmousedown="mouseDown()">Label</span>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

I want to trigger the select element to show its list when I click the span element. I can only use JavaScript (no JQuery) to achieve this.

So far I have tried

mousedown function {
    var btn = getElementById("button");
    btn.nextSibling.click()
}

and:

mousedown function {
    function eventFire(el, etype){
      if (el.fireEvent) {
        el.fireEvent('on' + etype);
      } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
      }
    }

    eventFire(btn.nextSibling, 'click');
}

But haven't been able to get it work.

If I do

mousedown function {
   console.log(btn.nextSibling);
}

This does return the right element, so I know my target is right. It's just not responding to .click(); or the eventFire function.

Would anyone know why this is?

(I can include the rest of the mousedown function if need be, but it large and conplex and for the sake of this part, still works as a normal onmousedown)