How to automatically expand html select element in javascript
- by xan
I have a (hidden) html select object in my menu attached to a menu button link, so that clicking the link shows the list so you can pick from it.
When you click the button, it calls some javascript to show the <select>. Clicking away from the <select> hides the list. What I really want is to make the <select> appear fully expanded, as if you had clicked on the "down" arrow, but I can't get this working. I've tried lots of different approaches, but can't make any headway. What I'm doing currently is this:
<li>
<a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a>
<select id="list" style="display:none; onblur="javascript:cancellist()">
</select>
</li>
// in code
function showlist() {
//using prototype not jQuery
$('list').show(); // shows the select list
$('list').focus(); // sets focus so that when you click away it calles onblur()
}
I've tried calling $('list').click().
I've tried setting onfocus="this.click()"
But in both cases I'm getting
Uncaught TypeError: Object # has no method 'click'
which is peculiar as link text says that it supports the standard functions.
I've tried setting the .size = .length which works, but doesn't have the same appearance (as when you click to open the element, it floats over the rest of the page.)
Does anyone have any suggestions?
