根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>
测试和工作在IE 6, 7和8b2, Firefox 2和3,Opera 9.62, Safari 3.2.1 for Windows和谷歌Chrome。
其他回答
您可以在提交时重新启用选择对象。
EDIT:也就是说,通常禁用select标签(带有disabled属性),然后在提交表单之前自动重新启用它:
jQuery示例:
禁用: $ (" # yourSelect”)。道具(“禁用”,真正的); 在提交前重新启用GET / POST数据: $ (" # yourForm”)。On ('submit', function() { $ (" # yourSelect”)。道具(“禁用”,假); });
此外,您可以重新启用每个禁用的输入或选择:
$('#yourForm').on('submit', function() {
$('input, select').prop('disabled', false);
});
我用jquery解决了它:
$("select.myselect").bind("focus", function(){
if($(this).hasClass('readonly'))
{
$(this).blur();
return;
}
});
模拟select的readonly属性的最佳方法是什么 标签,仍然得到POST数据?
只要让它成为一个输入/文本字段,并添加'readonly'属性。如果select被有效地“禁用”,那么无论如何您都不能更改该值,因此您不需要select标记,您可以简单地将“selected”值显示为只读文本输入。对于大多数UI目的,我认为这应该足够了。
所以无论出于什么原因,这里提到的所有基于jquery的解决方案都不适合我。所以这里是一个纯javascript的解决方案,它也应该在做POST时保留所选的值。
setDropdownReadOnly('yourIdGoesHere',true/false)
函数setDropdownReadOnly(controlName, state) { var ddl = document.getElementById(controlName); For (i = 0;I < ddl.length;我+ +){ if (i == ddl.selectedIndex) ddl[我]。禁用= false; 其他的 ddl[我]。禁用=状态; } }
使用tabindex解决方案。适用于选择和文本输入。
简单地使用.disabled类。
CSS:
.disabled {
pointer-events:none; /* No cursor */
background-color: #eee; /* Gray background */
}
JS:
$(".disabled").attr("tabindex", "-1");
HTML:
<select class="disabled">
<option value="0">0</option>
</select>
<input type="text" class="disabled" />
编辑:使用Internet Explorer,你还需要这个JS:
$(document).on("mousedown", ".disabled", function (e) {
e.preventDefault();
});