如何让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" -&gt;将从数据库中获取您的值并在表单中显示。 readonly="readonly" -&gt;您可以在选择框中更改您的值,但您的值无法保存在您的数据库中。

【讨论】:

错误,已保存。看起来并非所有浏览器都处理“只读”属性,因此不可靠。【参考方案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 库)效果很好,是将 &lt;select&gt; 标记的 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>

这样,视觉效果没有变化,这将在&lt;FORM&gt;内进行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 是你的&lt;select&gt; 元素:

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只读的主要内容,如果未能解决你的问题,请参考以下文章

模板中的只读表单,django

Yii2:如何禁用或只读 Select2 小部件?

HTML 表单只读 SELECT 标记/输入

HTML 表单只读 SELECT 标记/输入

如何根据 b-form-select 中的选定值禁用/启用文本字段?

如何从 vue js 中的 BFormSelect 或 b-form-select 中删除默认类?