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时，显示带有过滤器和a的对话框   新的<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
    }
});

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

Answer 2

我想禁用所有表单控件（使用＆＃39; form_control＆＃39;类）在表格中（id＆＃39; details_table＆＃39;），包括选择，并将用户指向＆＃39;编辑＆＃39;打开模态的按钮。对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();
});

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

2 个答案: