select trigger mousedown via keyboard

by SamHasler

HTML

<button onclick="trigger()">Trigger size</button>
<br><button onclick="document.getElementById('label').click()">Trigger Label</button>
<br><button onclick="$('#sel').mousedown()">Trigger mousedown</button>
<br><button id="fire" type="button" onclick="runThis()">Show dropdown items</button>
<br>
<label id="label" for="sel">Label</label>
<select name="#" id="sel" onChange="display_div(this.selectedIndex);">
      <option selected="selected"> </option>
      <option >1</option>
      <option >2</option>
      <option >3</option>
</select>

<span id="message"></span>

JavaScript

var element = document.getElementById('sel');

// let's use onclick for simplicity (use attachEvent or addEventListener!)

function messageFn(msg){
  return function() {
    document.getElementById('message').innerHTML =        document.getElementById('message').innerHTML + "<p>"+ msg +"</p>";  
  };
}

element.onclick = messageFn("button clicked");

document.trigger = function trigger(){
    var sel = document.getElementById('sel');
    var len=sel.getElementsByTagName('*').length;
    sel.setAttribute('size',len);
    messageFn(len)();
}

element.click();


// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('sel');
    showDropdown(dropdown);
};