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

Question

我一直在寻找一种打开select / combobox点击另一个元素的方法。 我读到的答案说这是不可能的但是...... facebook是如何做到的？

在你的Facebook时间线中，当你想要更改状态的日期时，有一个ahchor，当你点击它时，会出现一个组合框。 我认为他们已经将样式应用于他们的选择，所以它看起来像锚，但它不是那样的。

他们的HTML代码有一个锚和一个选择元素，最后一个是隐藏的。 然后，我知道select元素定位为绝对，但我无法从他们的javascript代码中获取它是如何工作的。

我试着像这样模拟它

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

这些都不起作用。 我看到一个复制SELECT元素的脚本，但它为它添加了2个属性：multiple和size。 这会改变选择的外观。

我想知道它怎么可能？ 我知道也许它不会在IE <9中起作用。

Answer 1

我们在谈论这个？

<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>

<a>标签位于<select>上方，点击通过管道传递。 如果单击右端的链接则不起作用。

更新

您可以使用此技巧打开选择。 将选择放在锚点下方，然后在单击后移动锚点。

<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>​

演示： http ： //jsfiddle.net/HfFWr/1/

在Firefox，Chrome和IE中测试过。