Question

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

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

和

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

但都没有奏效。

我做错了什么？

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

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

Answer 1

这应该有效： -

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

Answer 2

问题在于您使用了错误的事件。

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

JsFiddle

Answer 3

根据我的经验，如果我需要禁用某些东西，最简单的方法就是拥有另一个不可见的元素（使用绝对定位）。如果要再次允许默认行为，则只需隐藏绝对元素。

Answer 4

我相信最好的解决方案是用其他东西替换select元素来点击（按钮或链接）。

顺便说一句，你可能想要查看CSS 3属性appearance，理论上它允许你让替换元素看起来像一个下拉列表。但目前支持非常有限：

Answer 5

隐藏页面加载时的选择选项（如果启用了Javascript）。单击选择框时不会显示它们，但第一个选项（“选择一个选项”或其他）的文本仍会出现在选择字段中。

$(document).ready(function() {
    $('#idOfSelect option').css('display', 'none');
});

更新了解决方案：

$(document).ready(function() {
    $('#idOfSelect').focusin(function() {
        $(this).css('display', 'none');
        $('body').click(function(event) {
            $(this).unbind(event);
            $('#idOfSelect').css('display', 'block');
        });
    });
});

Answer 6

使用已停用

$(this).attr("disabled","disabled");

Answer 7

我刚刚通过操纵select的'size'属性解决了这个问题。不是很优雅，但工作。希望对你有所帮助。

<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>

<!-- The JS function -->
<script>
    function tackleDropdown(){
        document.getElementById('select').setAttribute('size', 0);

        // your code for displaying the jQuery UI dialog (is it colorbox???)

        // re-enabling the drop down
        document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
    }
</script>

Answer 8

你可以，诀窍是取消mousedown事件，而不是点击。事件链的制作方式是，如果mousedown被取消，则不会发生click和mouseup：

function cancelDropDown(ev) {
  ev.preventDefault();
}

document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Answer 9

一个基于CSS的简单解决方案是这个小片段：

select:read-only * {
    display: none;
}

这将使选择选项时这些选项不可用。此操作模仿输入的“只读”属性的行为。

防止选择菜单打开

9 个答案: