Here we are going to see how to trigger or show select box options by clicking on another HTML element. We can modify event as per our wish like mouseover,focus and so on.

show select box options by javascript.

Browsers do not allow expanding

In pure javascript, that control can be expanded only by directly clicking on it using the mouse.So i suddenly found the project called expandselect. This solves the our issue.

How to use expandselect?

1.Include the javascript function ExpandSelect() from expandselect.

2.Add select box html code on your html document as below.

<div>
<a href="javascript:void(0);" id="trigger_select">show select box option</a>

<select id="listbox">
 <option>List 1</option>
 <option>List 2</option>
</select>
<div>

3.Trigger click function as below.

$(function(){

    $("#trigger_select").click(function(){

        ExpandSelect('listbox');

    });

});

We can do this in normal Js onClick event also.

Demo

Here we can download expandselect.js