根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
我们还可以禁用除所选选项之外的所有选项。
这样,下拉菜单仍然可以工作(并提交其值),但用户不能选择其他值。
Demo
<选择> <选项禁用> 1 > < /选项 <选项> 2 > < /选项 <选项禁用> 3 < /选项> < /选择>
其他回答
在一个选项中,你可以使用disabled="disabled",而不是选择本身
有同样的问题,并发现非常有用的属性表单提交禁用控件。
将其设置为True,禁用的输入现在是POST。
“选择多个”对上述代码建议的响应几乎没有那么好。经过大量的推敲和拼凑,我最终得到了这个:
var thisId="";
var thisVal="";
function selectAll(){
$("#"+thisId+" option").each(function(){
if(!$(this).prop("disabled"))$(this).prop("selected",true);
});
$("#"+thisId).prop("disabled",false);
}
$(document).ready(function(){
$("select option:not(:selected)").attr('disabled',true);
$("select[multiple]").focus(function(){
thisId=$(this).prop("id");
thisVal=$(this).val();
$(this).prop("disabled",true).blur();
setTimeout("selectAll();",200);
});
});
我的解决方案是添加select[readonly] {pointer-events: none;}样式,然后添加这个JS来处理键盘事件:
$(document).on('keydown', 'select[readonly]', function(e) {
if (e.keyCode != 9) {
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
e.cancel = true;
}
});
这仍然允许遍历带有tab的元素。
html的解决方案:
<选择聚焦事件= " this.blur ();" >
javascript的:
selectElement。addEventListener(“焦点”,selectElement。模糊,真正的); selectElement。attachEvent(“焦点”,selectElement.blur);/ /谢谢,IE
删除:
selectElement。removeEventListener(“焦点”,selectElement。模糊,真正的); selectElement.detachEvent(“焦点”,selectElement.blur);/ /谢谢,IE
编辑:增加删除方法