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.
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.
Here we can download expandselect.js