Javascript 防止选择菜单打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8322969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing select menu from opening
提问by GordonM
Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
可能是一个愚蠢的问题，但是如何防止表单中的选择元素在单击时显示其下拉菜单？我尝试了以下方法：
$('select').click (function (e) {
console.log (e);
return false;
});
and
和
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
但都没有奏效。
What am I doing wrong?
我究竟做错了什么？
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
编辑：我需要知道的原因是对于需要优雅降级的 jquery 增强选择元素。这个想法是选择，当单击时，打开一个 jquery UI 对话框，其中包含一个精心制作的列表，用户可以从中进行选择（单击列表项会导致选择的值更新）。如果 JS 被禁用，那么选择应该正常运行。
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.
问题是，除了对话框打开，下拉菜单也出现了，这不是我想要的。我不能只是禁用控件，因为它的值需要与表单的其余部分一起提交。
采纳答案by RoToRa
I believe the best solution would be to replace the select element with something else to click on (a button or a link).
我相信最好的解决方案是用其他要点击的东西（按钮或链接）替换选择元素。
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
顺便说一句，您可能需要查看 CSS 3 属性appearance，理论上它允许您让替换元素看起来像一个下拉列表。然而，目前的支持非常有限：
回答by Deniz Ozger
This should work:-
这应该有效：-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});
回答by Allenph
回答by Simon
From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.
根据我的经验，如果我需要禁用某些东西，这是在其上添加另一个不可见元素的最简单方法（使用绝对定位）。当您想再次允许默认行为时，您只需隐藏绝对元素。
回答by Sebas
You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
你可以，诀窍是取消 mousedown 事件，而不是点击。事件链的制作方式是，如果取消 mousedown，则单击和 mouseup 不会发生：
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);
回答by Nate Barr
Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
在页面加载时隐藏选择选项（如果启用了 Javascript）。单击选择框时，它们不会显示，但第一个选项（“选择一个选项”或其他任何内容）的文本仍将出现在选择字段中。
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
更新的解决方案：
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});
回答by Rohitesh
I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
我刚刚通过操作 select 的“大小”属性解决了这个确切的问题。不是很优雅，但有效。希望对你有所帮助。
<!-- 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>
回答by Gowri
Use disabled
禁用使用
$(this).attr("disabled","disabled");
回答by Federico Morán
A simple solution based on CSS is this small fragment:
一个基于 CSS 的简单解决方案是这个小片段：
select:read-only * {
display: none;
}This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.
这将使选项在选择时不可用。此操作模仿输入的“只读”属性的行为。
