有没有一种通用的方法来“关闭”<select>下拉菜单（不是.blur()）？

Question

有一个巧妙的技巧可以用来“关闭”<select>下拉菜单。 链接

$('#test').click(function(){
    $('#test').hide();
    setTimeout(function(){
        $('#test').show();
    },20);
});​

这段代码似乎在Windows上的Chrome和Firefox总是可行的。在IE中它在我的实际代码中可以工作，但是在我测试IE中的jsfiddle代码时，它无法工作。并且在Mac上，这对于任何浏览器都不起作用。Mac和Windows之间的区别在于，在Mac上，选项在它们自己的元素中打开（有点 - 检查页面不显示新元素）。因此，下拉条隐藏并重新出现，但是带有选项的新菜单不被认为是 $（'#test'）的一部分，因此它们不会隐藏。在Windows中，带有选项的菜单被视为 $（'#test'）的一部分，因此当您隐藏它时，菜单也会随之隐藏。

所以问题是，是否有一种方法可以在任何浏览器和任何操作系统上“关闭”<select>下拉菜单？

---

更新

我不是指使用.blur()这就是为什么。我有一些代码来模拟一个下拉菜单，但实际上是<select multiple>。因此，我只有一个正常的<select>可见，当我单击它时，我将其替换为绝对定位的<select multiple>元素。选择选项之后，这个元素消失了，<select>元素回来了。任何关于此的帮助都将是很棒的。

- Aust

---

如何理解 $('#test').click(function(){ $(this).blur(); }); -> http://jsfiddle.net/vqA3M/7/ - Selvakumar Arumugam

尝试使用以下代码：var t = this, p = t.parentNode, n = t.nextSibling; 然后在回调函数中使用 p.insertBefore(t, n); - I Hate Lazy

只是让你知道，Webkit浏览器在选择和点击事件方面存在问题。http://forum.jquery.com/topic/problem-with-click-on-select-boxes-webkit 我相信其他浏览器也可能会出现这种情况。 - Maktouch

这是一个演示：http://jsfiddle.net/UNzTg/ 我在setTimeout之前添加了.removeChild()，以防它提供更好的结果。 - I Hate Lazy

为什么不使用focus而不是click？ - Ian

Answer 1

我还没有测试过，但我想你可以直接

$('select').blur();

或者将焦点放在其他地方以关闭它。

更新 - 哦，第一个评论者已经提供了示例。

- Huangism

---

如果你想要UI的话，你甚至可以不使用select来制作一个下拉菜单，并在提交时使用js来填充表单元素。我认为scion.ca的表单中有类似的东西。 - Huangism

Answer 2

select 不适用于此，但您可以创建其他标记来“伪造”select布局。

HTML

选项1

选项2

选项3

​

JS

$('#test').click(function() {
    $(this).toggleClass('open');
}).find('li').not(':first').on('hover',function() {
   $(this).parent().removeClass('open');
});​

CSS

ul {
   list-style:none  ;
   border : solid 1px Gray;    
   width: 80px;
   height: 20px;
   overflow:hidden;
   cursor:pointer;
}
ul.open {
 height: 60px;   
}

​

这里有一个演示。您可以根据需要自定义标记。

- Jashwant

Answer 3

如果您将事件从click更改为focus，可能会有所帮助：

$("#test").focus(function () {
    // Your original code

    // or: this.blur();
    // just DON'T call this.focus()
});

- Ian

Answer 4

使用.blur()在click()上怎么样？不幸的是，我现在无法测试它们全部。

$('select').click(function(){ 
   $(this).blur(); 
});

演示： http://jsfiddle.net/vqA3M/7/

- Selvakumar Arumugam

---

我不是指在选择一个项目后关闭下拉菜单。我是指立即关闭它，以便用户无法选择项目。 - Aust

@Aust 你为什么要这样做？ - Phrogz

如果这是目标，为什么不直接在选择标签中添加“disabled”属性呢？为什么要让用户经历菜单弹出和关闭的奇怪体验呢？ - HMartch

@Phrogz，@redlena - 哈哈，我正在做的是当用户打开下拉菜单时，它会隐藏该下拉菜单并显示一个带有相同选项的<select multiple>列表，该列表是绝对定位的。这是为了UI。下拉菜单比<select multiple>更漂亮。 - Aust

@Aust 看起来在Webkit浏览器中，下拉选项的<select>显示方式有所不同。http://jsfiddle.net/vqA3M/11/ -> 即使焦点在下一个元素上，也会显示下拉选项。 - Selvakumar Arumugam