单击选择时停止镶边以显示下拉列表

Question

我想点击一个<select>但停止它以显示他的下拉列表

$('select').click(function(){
    if ($(this).find('option').size() > 20) {
        // some code to do my job
        return false;
    }
});

代码return false可以停止Firefox中的下拉列表显示(实际上,下拉列表首先显示并在一段时间后隐藏),但在Chrome中无效.

我也试过让它<select>被禁用,触发blur()它,或触发click()其他元素,但下拉列表仍然存在,除非用户点击其他地方.

这可能吗？...谢谢!

---

长篇故事就在这里(如果你对我为什么这么想感兴趣):

如您所知,有时候会有<select>太多 <option>内容,当您点击它时,会有一个很长的下拉列表.在一个很长的下拉列表中找到你需要的东西是一个糟糕的工作...但不幸的是我的网站有很多.

所以我认为最简单的方法是编写一些javascript来改变它,当选项超过20时,显示一个带有过滤器的对话框和一个<select>只有过滤后<option>才能轻松查找的新对话框.

而我的问题是下拉列表仍然显示,让我的用户感到困惑......他们不知道在哪里操作."对话框或原点选择".

Answer 1

问题是select元素的默认操作发生在mousedown事件上,而不是click(或mouseup),因此您需要将事件处理程序绑定到mousedown:

$("select").mousedown(function(e) {
    if ($(this).find('option').length > 20) {
        e.preventDefault(); //return false will also work
    }
});

这是一个有效的例子.请注意,我已经使用了preventDefault事件对象的方法,因为我认为这样可以更清楚地了解实际发生的事情.但是,return false也会奏效.