停止chrome显示下拉列表时，单击一个选择

stop chrome to show dropdown list when click a select

本文关键字：一个 选择 单击 显示 chrome 下拉列表 停止      更新时间：2023-09-26

我想点击一个<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来改变当option大于20时，显示一个带有过滤器和新的<select>，只过滤<option>，让找到容易。

而我的问题是下拉列表仍然显示，使我的用户困惑……他们不知道在哪里操作。的对话选择"起源。

问题是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也可以。

我想禁用表(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();
});
相关文章：