javascript - 打开选择用javascript点击另一个元素

Question

我一直在寻找一种方法来打开一个选择/组合框点击另一个元素。我读到的回答说这是不可能的，但是……Facebook 是怎么做到的？

在您的 Facebook 时间轴中，当您想要更改某个状态的日期时，会出现一个 anchor ，当您单击它时，会出现一个组合框。我以为他们已经将样式应用于他们的选择，所以它看起来像一个 anchor ，但事实并非如此。

他们的 HTML 代码有一个 anchor 和一个选择元素，最后一个是隐藏的。然后，我知道 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> 之上然后点击通过管道传输。如果您单击右端的链接，它不起作用。

更新

您可以使用这个技巧来打开选择。将选择放在 anchor 下方并在单击后移动 anchor 。

<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 中测试。