open dropdown list from javascript function [duplicate]

Question

Iam trying to show the dropdown option when javascript function is called. but eventually iam not succeed on this. need help Here is my code:

<script>
function showState(str){ 
$('#Acntname').trigger('click');

}
</script>
...
<select class="input_panel" id="Acntname" > 
<option value="0">Select</option>
<option value="1">Equity Share Capital</option>
<option value="2">Deprication Fund</option>  </select>

<input type="text" class="input_panel" id="accountname" onkeyup="showState(this.value)"/>

i used triggered function to open the dropdown but it doesn't work.

Answer 1

Here you go..you can do this by dispatching mousedown event on dropdown..

Demo Fiddle

JS:

window.showState = function (str) {
    var dropdown = document.getElementById('Acntname');
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
}

EDIT: This works perfectly in Chrome <53, not sure for Firefox and IE.

Answer 2

You can do this:

var sel = document.getElementById('Acntname');
var len = sel.options.length;

sel.setAttribute('size', len);

Set the size back to 1 to close it