Select (expand) dropmenu when clicking on another item

Question

I have a div containing a selection menu and another element (.dropArrow).

What I would like to do is select the menu when you click on .dropArrow.

Here's the jquery I've tried so far, but without success ...

$(".dropArrow").live('click', function() { $(this).siblings("select").click(); }); 

HTML

 <div class="selectContainer selectTest" style="width: 305px;"> <select id="selectTest"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <span class="dropArrow">^</span> </div> 

I assume this is the wrong part of .click () since I can change it to something like .hide () and it works fine.

Answer 1

I did this using only CSS, not Javascript. However, I do not think this solution is 100% excellent.

See for yourself: jsfiddle.net/Luuk/35xdx/

In addition, this post explains more about activating select elements using Javascript.