根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
简单的CSS解决方案:
select[readonly]{
background: #eee;
cursor:no-drop;
}
select[readonly] option{
display:none;
}
这导致在选择是灰色的漂亮的“禁用”光标悬停 在选择选项列表是“空”,所以你不能改变它的值。
其他回答
(简单的解决方案)
由于OP特别要求他不想禁用select元素,下面是我用来使select变为只读的方法
在html中
<select style="pointer-events: none;" onclick="return false;" onkeydown="return false;" ></select>
就是这样
解释
将pointer-events设置为none将禁用使用鼠标/光标事件编辑“select-element” 设置onclick和onkeydown函数返回false将禁用使用键盘编辑“select-element”
通过这种方式,您不必创建任何额外的元素,或使用javascript禁用/重新启用元素,或打乱表单提交逻辑,或使用任何第三方库。
此外,您可以轻松地添加css样式,如设置背景颜色为灰色或文本颜色为灰色,以暗示该元素是只读的。我没有将它添加到代码中,因为它非常特定于您的站点主题
或者你想通过javascript来实现
let isReadOnly = true; selectElement。Onclick = function () { isReadOnly; }; selectElement。onkeydown = function () { isReadOnly; }; selectElement.style.pointerEvents = isReadOnly ?“none”:“全部”;
这可能在某种程度上与其他解决方案类似,但简化为更少的行数。
假设有一个jquery函数禁用目标选项…
$("select[id='country']").val('PH').attr("disabled", true);
$("select[id='country']").parent().append("<input type='hidden' id='country' value='PH'>");
如果你想重新启用这个选项…
$("select[id='country']").attr("disabled", false);
$("input[id='country']").remove();
简单地说,在提交表单之前删除disabled属性。
$('form').submit(function () {
$("#Id_Unidade").attr("disabled", false);
});
我们还可以禁用除所选选项之外的所有选项。
这样,下拉菜单仍然可以工作(并提交其值),但用户不能选择其他值。
Demo
<选择> <选项禁用> 1 > < /选项 <选项> 2 > < /选项 <选项禁用> 3 < /选项> < /选择>
html的解决方案:
<选择聚焦事件= " this.blur ();" >
javascript的:
selectElement。addEventListener(“焦点”,selectElement。模糊,真正的); selectElement。attachEvent(“焦点”,selectElement.blur);/ /谢谢,IE
删除:
selectElement。removeEventListener(“焦点”,selectElement。模糊,真正的); selectElement.detachEvent(“焦点”,selectElement.blur);/ /谢谢,IE
编辑:增加删除方法