打开选择使用javascript单击另一个元素

Question

I've been looking for a way to open a select / combobox clicking another element. I read answers saying that is impossible but... How is facebook doing it?

In your facebook timeline, when you want to change the date of a status, there is an ahchor and when you click it, a combobox appears. I thought they had applied styles to their select so it would look like an anchor but it wasn't like that.

Their HTML code has an anchor and a select element, this last one is hidden. Then, I know the select element is positioned as absolute but I can't get from their javascript code how it works.

I tried to simulate it like this

$('#element').click();
document.getElementById('element').click();

None of this works. I saw a script that duplicated the SELECT element but it add 2 attributes to it: multiple and size. This changes the look of the select.

I would like to know how it would be possible? I know maybe it won't work in IE < 9.

Answer 1

We are talking about this?

<span class="period periodDay">
   <a class="uiIconText periodLabel" style="padding-left: 11px;"><img class="img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yo/r/5-fr6z6ewzf.png" alt="" style="top: 4px;" width="6" height="6" />Tag hinzufügen</a>
   <select data-name="day" class="periodMenu dayMenu" name="backdated_date[day]">
      <option value="">Tag:</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="2">more days...</option>
   </select>
</span>

The <a> tag is over the <select> and the click gets piped through. If you click the link an the right end it does not work.

Update

You can use this trick to open the select. Place the select below the anchor and move the anchor after the click.

<select id="moveme" style="position: relative;"
    onmousedown="$('#moveme').css('left', '100px');">
  <option value="">Tag:</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">more days...</option>
</select>​

Demo: http://jsfiddle.net/HfFWr/1/

Tested in Firefox, Chrome and IE.