根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
如果你禁用了一个表单字段,当表单被提交时,这将不会被发送。 所以如果你需要一个像disabled一样工作但发送值的readonly,可以这样做:
在元素的只读属性发生任何变化之后。
$('select.readonly option:not(:selected)').attr('disabled',true);
$('select:not([readonly]) option').removeAttr('disabled');
其他回答
您可以在提交时重新启用选择对象。
EDIT:也就是说,通常禁用select标签(带有disabled属性),然后在提交表单之前自动重新启用它:
jQuery示例:
禁用: $ (" # yourSelect”)。道具(“禁用”,真正的); 在提交前重新启用GET / POST数据: $ (" # yourForm”)。On ('submit', function() { $ (" # yourSelect”)。道具(“禁用”,假); });
此外,您可以重新启用每个禁用的输入或选择:
$('#yourForm').on('submit', function() {
$('input, select').prop('disabled', false);
});
还有一个更现代的选项(没有双关语的意思)是禁用选择元素的所有选项,除了选中的选项。
但是请注意,这是一个HTML 4.0特性 而ie 6 7 8 1似乎不符合这个。
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html
根据格兰特·瓦格纳的建议;下面是一个jQuery代码片段,它使用处理函数而不是直接使用onXXX属性:
var readonlySelect = function(selector, makeReadonly) {
$(selector).filter("select").each(function(i){
var select = $(this);
//remove any existing readonly handler
if(this.readonlyFn) select.unbind("change", this.readonlyFn);
if(this.readonlyIndex) this.readonlyIndex = null;
if(makeReadonly) {
this.readonlyIndex = this.selectedIndex;
this.readonlyFn = function(){
this.selectedIndex = this.readonlyIndex;
};
select.bind("change", this.readonlyFn);
}
});
};
您可以禁用除当前选中的选项以外的所有选项,而不是选择本身。这提供了一个工作的下拉菜单的外观,但只有您想要传递的选项是有效的选择。
这是最简单、最好的解决办法。 您将在您的选择上设置一个readolny属性,或任何其他属性,如data-readonly,并执行以下操作
$("select[readonly]").live("focus mousedown mouseup click",function(e){
e.preventDefault();
e.stopPropagation();
});