防止选择菜单打开

Question

可能是一个愚蠢的问题,但是如何阻止表单中的选择元素在单击时显示其下拉菜单？我尝试了以下方法:

$('select').click (function (e) {
    console.log (e);
    return false;
});

和

$('select').click (function (e) {
    e.preventDefault ();
    console.log (e);
});

但都没有奏效.

我究竟做错了什么？

编辑:我需要知道的原因是jquery增强的select元素需要优雅地降级.想法是选择,当点击时,打开一个jquery UI对话框,其中包含一个用户可以选择的精确填充列表(单击列表项会导致select的值更新).如果JS被禁用,则select应该正常运行.

问题是,除了打开对话框之外,还会出现下拉列表,这不是我想要的.我不能只是禁用控件,因为它的值需要与表单的其余部分一起提交.

Answer 1

这应该工作: -

$('#select').on('mousedown', function(e) {
   e.preventDefault();
   this.blur();
   window.focus();
});

请注意，也可以通过键盘交互来打开选择菜单。例如，在Safari中，用户可以跳至<select>并按下向上/向下键以选择一个选项。这不会触发`mousedown`事件。 (2认同)
此代码不适用于与选择关联的标签 (2认同)

Answer 2

问题是你正在使用错误的事件.

<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
  <option>Some Option</option>
</select>

这是正确的答案。您不需要模糊下拉菜单，只需在“mousedown”上使用“preventDefault”，而不是在“mousedown”之后发生“click”。 (3认同)

Answer 3

根据我的经验,如果我需要禁用某些东西,最简单的方法是在其上放置另一个不可见的元素(使用绝对定位).如果要再次允许默认行为,则只需隐藏绝对元素.

Answer 4

我相信最好的解决方案是将选择元素替换为其他可单击的元素（按钮或链接）。

顺便说一句，您可能想研究一下 CSS 3 属性appearance，理论上它允许您让替换元素看起来像下拉菜单。然而目前的支持非常有限：