如何让form中的select只读
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让form中的select只读相关的知识,希望对你有一定的参考价值。
参考技术A 1. <select style="width:195px" name="role" id="role" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">这种方法可以使下拉框和平常没有区别,看起来没有任何不同。唯一不同的就是下拉并单并选择之后,它不会鸟你,选了和没有选一样一样的。就是无视客户的选择。
2.设置disabled属性<select style="width:195px" name="role" id="role" disabled="disabled">
这个看起来更直接,直观就是有只读的感觉,也不可以点击和下拉了。里面的字也会变成灰色
当属性设置为"disabled"时,提交表单时,select的值无法传递,提交前移除disabled属性$("#role").removeAttr("disabled");
jquery添加属性$("#role").attr("disabled","disabled");本回答被提问者采纳
HTML 表单只读 SELECT 标记/输入
【中文标题】HTML 表单只读 SELECT 标记/输入【英文标题】:HTML form readonly SELECT tag/input 【发布时间】:2010-09-26 23:55:54 【问题描述】:根据 HTML 规范,HTML 中的select
标签没有readonly
属性,只有disabled
属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled
。
唯一的问题是禁用的 HTML 表单输入不会包含在 POST / GET 数据中。
模拟select
标记的readonly
属性并仍然获取POST 数据的最佳方法是什么?
【问题讨论】:
服务器端不要依赖它。任何人都可以创建自己的 HTML 页面并将其设为 RW。 但这不是 PHP 特有的问题。 我建议在这种情况下根本不要使用选择元素。有什么理由不能将值显示为纯文本? @ppumkin 您的评论毫无意义。我并不是说选择或隐藏表单字段从来没有一个好的用例。 OP 在页面上显示一些文本时遇到问题,我只是想知道在这种情况下使用 select 元素的目的是什么。 我一定是读错了问题。他说他想禁用选择,这样用户就不会改变它。也许他需要使用选择来呈现页面并使用 jquery 来防止更改。但是当他提交回来时,没有任何数据。我也在做同样的事情。我需要显示由其他选择过滤的选择,最后一个下拉菜单通过 ajax 保存到数据库,因此必须锁定所有之前的下拉菜单。当我重新渲染页面时,是的,好的——我可以显示标签而不是选择。但这不是问题:) 【参考方案1】:<select id="case_reason" name="case_reason" disabled="disabled">
disabled="disabled" ->
将从数据库中获取您的值并在表单中显示。
readonly="readonly" ->
您可以在选择框中更改您的值,但您的值无法保存在您的数据库中。
【讨论】:
错误,已保存。看起来并非所有浏览器都处理“只读”属性,因此不可靠。【参考方案2】:如果您有一个应该是只读的选择标签,您必须在逻辑上将选择框转换为单个“文本”字段。
我这样说是合乎逻辑的,因为它就像: “我必须向用户显示一个值”
无论值是否来自选择标签,仍然是单个值,不能更改(只读)。
因此,从逻辑上讲,只有在第一次插入值时才使用选择标记。
然后,当你需要显示这个值时,你必须把它放在一个“text field-readonly”上。
如果是只读的,多选也会变成值列表(选定的值)
我使用“文本”是因为只读标签不需要“类型”属性。 干杯
【讨论】:
【参考方案3】:我知道为时已晚,但可以用简单的 CSS 来完成:
select[readonly] option, select[readonly] optgroup
display: none;
The style hides all the options and the groups when the select is in readonly
state, so the user can not change his selection.
不需要任何 JavaScript hack。
【讨论】:
漂亮而简单。我喜欢它。 这是一个非常好的解决问题的方法。谢谢! 2020 并且不可能将只读属性添加到下拉列表中......很好的解决方法! 它就像魅力一样。优秀而优雅!谢谢【参考方案4】:我发现使用纯 javascript(即:不需要 JQuery 库)效果很好,是将 <select>
标记的 innerHTML 更改为所需的单个剩余值。
之前:
<select name='day' id='day'>
<option>SUN</option>
<option>MON</option>
<option>TUE</option>
<option>WED</option>
<option>THU</option>
<option>FRI</option>
<option>SAT</option>
</select>
示例 Javascript:
document.getElementById('day').innerHTML = '<option>FRI</option>';
之后:
<select name='day' id='day'>
<option>FRI</option>
</select>
这样,视觉效果没有变化,这将在<FORM>
内进行POST/GET。
【讨论】:
【参考方案5】:更简单: 将样式属性添加到您的 select 标记:
style="pointer-events: none;"
【讨论】:
它对我有用,但指针事件将使跨浏览器支持? 它不会工作。用户可以使用键盘更改输入。【参考方案6】:使用 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();
);
【讨论】:
【参考方案7】:我知道这不会帮助所有人(如果您只是客户端),但会帮助一些全栈并且可以控制后端和前端的人。
如果用户没有编辑字段的权限,我只返回当前选择的下拉菜单。
这是我的一些后端控制器:
#region Prepare Action Priviledges
editAuditVM.ExtAuditEditRoleMatrixVM = new ExtAuditEditRoleMatrixVM
CanEditAcn = _extAuditEditRoleMatrixHelper.CanEditAcn(user, audit),
CanEditSensitiveDesignation = _extAuditEditRoleMatrixHelper.CanEditSensitiveDesignation(user, audit),
CanEditTitle = _extAuditEditRoleMatrixHelper.CanEditTitle(),
CanEditAuditScope = _extAuditEditRoleMatrixHelper.CanEditAuditScope(user, audit)
;
#endregion
#region Prepare SelectLists for Drop Downs
#region AuditScope List
IQueryable<SelectListItem> auditScopes = _auditTypesRepo.AuditTypes
.Where(at => at.AuditTypeClassCode.ToLower() == "e")
.Select(at => new SelectListItem
Text = at.AuditTypeText, Value = at.AuditTypeID.ToString() );
// Cannot make a select readonly on client side.
// So only return currently selected option.
if (!editAuditVM.ExtAuditEditRoleMatrixVM.CanEditAuditScope)
auditScopes = auditScopes
.Where(ascopeId => ascopeId.Value == editAuditVM.ExternalAudit.AuditTypeID.ToString());
#endregion
#endregion
【讨论】:
【参考方案8】:模拟选择的只读属性的最佳方法是什么 标签,并且仍然获取 POST 数据?
只需将其设为输入/文本字段并为其添加“只读”属性即可。如果选择实际上是“禁用”,那么您无论如何都无法更改该值,因此您不需要选择标签,您可以简单地将“选择”值显示为 readonly 文本输入。对于大多数 UI 用途,我认为这应该足够了。
【讨论】:
【参考方案9】:所以无论出于何种原因,这里提到的所有基于 jquery 的解决方案都不适合我。因此,这是一个纯 javascript 解决方案,它在进行 POST 时也应该保留选定的值。
setDropdownReadOnly('yourIdGoesHere',true/false)
function setDropdownReadOnly(controlName, state) var ddl = document.getElementById(controlName); for (i = 0; i < ddl.length; i++) if (i == ddl.selectedIndex) ddl[i].disabled = false; else ddl[i].disabled = state;
【讨论】:
【参考方案10】:聚会有点晚了。但这对我来说似乎完美无缺
select[readonly]
pointer-events:none;
【讨论】:
【参考方案11】:我的解决方案是按照这里很多人的建议添加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 遍历元素。
【讨论】:
【参考方案12】:input
是你的<select>
元素:
input.querySelectorAll(':not([selected])').forEach(option =>
option.disabled = true
)
这将保留数据中的选择(因为它没有被禁用),并且只有未被选中的option
被禁用,因此不可选择。
结果是无法更改的可读选择(=> 只读)。
【讨论】:
【参考方案13】:从https://***.com/a/71086058/18183749提取
如果您不能使用“禁用”属性(因为它会删除值的 POST 时输入),并注意到 html 属性“只读”仅适用 在 textarea 和一些输入(文本、密码、搜索,据我所见)上, 最后,如果你不想费心复制你所有的 带有隐藏输入逻辑的选择、复选框和单选,您可能会发现 以下功能或您喜欢的任何他的内部逻辑:
addReadOnlyToFormElements = function (idElement)
// html readonly don't work on input of type checkbox and radio, neither on select. So, a safe trick is to disable the non-selected items
$('#' + idElement + ' select>option:not([selected])').prop('disabled',true);
// and, on the selected ones, to mimic readOnly appearance
$('#' + idElement + ' select').css('background-color','#eee');
没有什么比删除这些只读文件更容易的了
removeReadOnlyFromFormElements = function (idElement)
// Remove the disabled attribut on non-selected
$('#' + idElement + ' select>option:not([selected])').prop('disabled',false);
// Remove readOnly appearance on selected ones
$('#' + idElement + ' select').css('background-color','');
【讨论】:
以上是关于如何让form中的select只读的主要内容,如果未能解决你的问题,请参考以下文章