根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
有同样的问题,并发现非常有用的属性表单提交禁用控件。
将其设置为True,禁用的输入现在是POST。
其他回答
(简单的解决方案)
由于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”:“全部”;
您可以在提交时重新启用选择对象。
EDIT:也就是说,通常禁用select标签(带有disabled属性),然后在提交表单之前自动重新启用它:
jQuery示例:
禁用: $ (" # yourSelect”)。道具(“禁用”,真正的); 在提交前重新启用GET / POST数据: $ (" # yourForm”)。On ('submit', function() { $ (" # yourSelect”)。道具(“禁用”,假); });
此外,您可以重新启用每个禁用的输入或选择:
$('#yourForm').on('submit', function() {
$('input, select').prop('disabled', false);
});
这是最简单、最好的解决办法。 您将在您的选择上设置一个readolny属性,或任何其他属性,如data-readonly,并执行以下操作
$("select[readonly]").live("focus mousedown mouseup click",function(e){
e.preventDefault();
e.stopPropagation();
});
一种简单的服务器端方法是删除所有选项,只删除希望被选中的选项。因此,在Zend Framework 1.12中,如果$element是一个Zend_Form_Element_Select:
$value = $element->getValue();
$options = $element->getAttrib('options');
$sole_option = array($value => $options[$value]);
$element->setAttrib('options', $sole_option);
所以无论出于什么原因,这里提到的所有基于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[我]。禁用=状态; } }