单击选择时停止 chrome 以显示下拉列表答案

【问题标题】：stop chrome to show dropdown list when click a select单击选择时停止 chrome 以显示下拉列表
【发布时间】：2011-11-09 08:29:39
【问题描述】：

我想点击<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来改变 that, when option is more than 20, show a dialog with a filter and a 新的<select>，它只过滤了<option>，方便查找。

我的问题是下拉列表仍然显示，让我的用户迷茫……他们不知道在哪里操作。 “对话框或原点选择”。

【问题讨论】：

您是否尝试过.mousedown 并将其设置为禁用或返回函数false？我认为这不起作用，因为您使用的是.click-event。

标签： javascript google-chrome

【解决方案1】：

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

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

这是working example。请注意，我使用了事件对象的preventDefault 方法，仅仅是因为我认为这样可以更清楚地了解实际发生的情况。但是，return false 也可以。

【讨论】：

mousedown 在 Chrome 中运行良好，但在 Firefox 中似乎无法运行，有什么建议吗？

【解决方案2】：

我想禁用表（id 'details_table'）中的所有表单控件（使用'form_control'类），包括选择，并将用户指向打开模式的“编辑”按钮。对先前答案的一个小调整似乎适用于 Linux 上的 Firefox 和 Chrome。尚未在其他浏览器中测试。

$('#details_table').on('mousedown', '.form-control', function(e) {
    alert("Please click on the Edit button to modify details.");
    e.preventDefault();
    this.blur();
});

【讨论】：