5

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.

Tom
  • 12,776
  • 48
  • 145
  • 240
  • Please post the relevant section of html as well. Also, which version of jQuery are you using? `.live()` is deprecated, and you should probably use `.on()` – nbrooks Jul 19 '12 at 11:14
  • sorry re-read your question and I don't think what you want is possible, doesn't seem to be triggered on element click – nbrooks Jul 19 '12 at 11:37

1 Answers1

5

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

Community
  • 1
  • 1
Lucas van Egeraat
  • 617
  • 4
  • 11
  • 1
    oh! the `pointer-events: none;` option seems to work in everything except IE. Is there an IE fix at all? – Tom Jul 19 '12 at 13:17
  • No, however you can use the solution provided here: http://stackoverflow.com/questions/4142619/how-to-make-select-element-be-transparent-in-chrome Basically you would give your select a different background, and in it you can put your arrow, of course the arrow would have to become an image. – Lucas van Egeraat Jul 19 '12 at 14:08