单击选择时停止chrome以显示下拉列表 [英] stop chrome to show dropdown list when click a select

问题描述

我想单击< select> ，但将其停止以显示他的下拉列表

I want to click a <select> but stop it to show his dropdown list

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

代码 return false 可以停止Firefox中的下拉列表显示(实际上，该下拉列表首先显示，稍后会隐藏)，但是在Chrome中不起作用.

The code return false can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.

我还尝试禁用< select> ，在其上触发 blur()，或在 click()上触发其他元素，但除非用户单击其他位置，否则下拉列表仍然存在.

I also tried let the <select> to be disabled, trigger blur() on it, or trigger click() on other element, but the dropdown list is still there unless user click somewhere else.

这可能吗?...并且谢谢！

Is this possible? ... and Thanks!

长篇故事就在这里(如果您对我为什么要这样做感兴趣)

Long story is here (if you have interested in why I want to do that):

您知道，有时候< select> 太多其中的< option> ，并且当您单击它时，会有一个很长的下拉列表列表.在很长的下拉列表中找到您需要的东西真是太糟糕了...但不幸的是，我的网站上有很多东西.

As you know, sometimes there will be a <select> with too many <option> in it, and when you click it, there will be a long dropdown list. Find what you need in a long dropdown list is a terrible job... But unfortunately there is a lot in my site.

所以我认为最简单的方法是编写一些JavaScript进行更改当option大于20时，将显示一个对话框，其中包含过滤器和新的< select> ，只过滤了< option> 以便于查找.

So I think the simplest way is to write some javascript to change that, when option is more than 20, show a dialog with a filter and a new <select> which only have filtered <option> to let find easy.

我的问题是下拉列表仍然显示，使我的用户困惑...他们不知道在哪里经营.对话框或来源选择".

And my problem is the dropdown list is still display, make my users confused... They don't know where to operate. "the dialog or the origin select".

推荐答案

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

The problem is that the default action of a select element occurs on the mousedown event, rather than click (or mouseup), so you'll need to bind an event handler to mousedown instead:

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

这是一个工作示例.请注意，我已经使用了事件对象的 preventDefault 方法，只是因为我认为这样可以更清楚地了解实际发生的情况.但是， return false 也将起作用.

Here's a working example. Note that I've used the preventDefault method of the event object, simply because I think that makes it clearer what's actually happening. However, return false will work too.

这篇关于单击选择时停止chrome以显示下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！