Select (expand) a dropmenu when clicking on another element

Question

I have a div containing a select 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 with no 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'm guessing it's the .click() part that's wrong as I can change that to something like .hide() and it works fine.

Answer 1

I made it work, using just CSS, no Javascript. However I don't think this solution is 100% perfect.

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

Also, this post explains more about activating select elements with Javascript