html select 不可编辑时表单提交问题

最新推荐文章于 2024-08-27 09:52:26 发布
最新推荐文章于 2024-08-27 09:52:26 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： HTML 文章标签： select disabled select 不可选 form 提交select 没数据 form 提交不了select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YPLee_8/article/details/79714364
版权

select 选择框在编辑的时候要改为不可选，查看文档发现有disabled属性，加上发现确实不可选了

但是紧接着测试发现form表单提交的时候select 内容并没有被提交，都是disabled惹的祸啊

对此有两种解决办法

一. js中获取每一个值然后手动提交表单

二. 因为是直接利用form.submit进行的提交，所以只能在进行提交前吧disabled去掉

两种方法都不是很优雅，但是如果能用第一种方法还是尽量第一种吧，稍微美观一些

YPLee_8
关注
专栏目录
html form表单input使用disabled后提交不能获取表单值的解决方法
12-13
form表单输入框input设置disable属性提交后，得不到该输入框的值，解决该类问题可以参考下面两个方法： 方法一： 使用readonly带替代disabled，即把 disabled="disabled" 修改为 readonly="readonly" 二者区别： disabled不能接收焦点，使用tab键时将被跳过，可能不是successful的； readonly可以接收焦点但不能被修改，可以使用tab键进行导航，可能是successful的。 注：只有successful的表单元素才是有效数据，即是进行提交后可以获取值。disabled和readonly的文本输入框只能通过脚本进
解决form表单 select disable 不能提交难题
chuncui2576的博客
01-05 2114
在 form 表单的 里面 select 如果 设置了 <select disabled="disabled" name="type" class="form-field col-sm-12 "> 那么 在 from 表单提交的时候， 是不能提交给后台的，那么 可以...
html select 禁止修改,input和select设置为不可修改及取消不可修改
weixin_39854867的博客
06-03 5157
input和select设置为不可修改及取消不可修改。1、当需设置input和select显示为只读(不可修改)时，两者有不同的设置方法。1)input可设置为只读，在其中增加属性readonly=“readonly”;2)select没有readonly这个属性，不过可以通过disabled=“disabled”进行设置;3)其中input设置为只读时，仍可提交，而select设置为不可用时，则...
react+antd：全局设置form表单不可编辑
热门推荐
superYe7的博客
08-29 1万+
在做编辑页面的时候遇到一个需求是“在指定状态下内容不可编辑” 方案一：给每个<Input>、<Select>...添加disable属性 这种方案在form表单内容比较多的情况下可能不是很方便，所以辜老师帮我想了方案二 方案二：封装个组件全局设置disable，如下 封装一个高阶组件( ./Input ) import React, { useContext, ...
解决form表单内容不能编辑，不能更改问题
m0_65274248的博客
09-14 2670
解决form表单内容不能编辑，不能更改问题
如何设置select只读不可编辑且select的值可传递
09-28
当select下拉框元素具有disabled属性时，它会呈现为灰色，且用户不能对其作出选择，同时其值在表单提交时不会被包含在请求中。为了在不更改用户界面上视觉体验的前提下，使得select的值能够被提交，可以采用...
js 使FORM表单的所有元素不可编辑的示例代码
10-26
第一个函数`disableOcx`的主要作用是在页面加载完成时，遍历表单中的所有元素，并通过设置元素的`disabled`属性为"true"，使得这些元素变为不可编辑状态。在代码中可以看到，通过一个for循环，代码遍历了表单的所有...
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的...
HTML 使用表单标签实现注册页面的实例代码
09-22
在创建注册页面时，表单标签是必不可少的一部分。下面详细介绍HTML使用表单标签实现注册页面的关键知识点。 1. 标签：它是表单的根元素，用来定义一个表单区域。它可以包含输入元素（如单选按钮、复选框、文本...
jsp中如何实现按下回车键自动提交表单
10-21
表单可以通过`<input type="submit">`按钮来提交，但默认情况下，按下回车键并不会自动触发提交，除非该焦点在`<input type="text">`或`<textarea>`等可编辑元素上。 要实现回车键自动提交表单，我们可以添加一个...
解决select 下拉框 设置disabled属性后 form表单提交到后台取不到值的情况
euijkfd的专栏
03-14 6793
1. 鉴于select 下拉框没有readonly属性，有以下两种方式：    1. &lt;select  style='width: 235px;color:#aaa'       onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;"&gt;    2.在...
select标签 禁止选择但又能通过序列化form表单传值到后台
weixin_30457551的博客
01-23 510
　　前言 　　项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled="disabled"时发现，无法序列化form获取到select标签的值；当我们使用readonly="readonly"发现，我们还是能展开下拉框并选择值，这时候我们应该怎么实现这个需求呢？ 　　代码实现 　　方法一 　　1、设置re...
select2 设置不可选，编辑
zhaofuqiangmycomm的博客
12-01 4057
                                       .li-disabled{ pointer-events:none; disabled: true; } &lt;form:select path="usageState" class="input-large li-disabled"&gt; &lt;form:options items="${f...
jQuery 设置 select 无法选择（类似禁用），且可以提交
weixin_42256765的博客
03-20 3588
概要 在项目开发中，一般回填页面的 select 都是为不可再次选择的，但是直接使用 disabled 属性会使 select 框无法再次提交，所以使用 css 对 select 框设置禁用选择是最好的办法。 select 禁用下拉选择 $('#xxx').attr('style','pointer-events: none;'); select 设置灰色 $('#xxx').attr('style','background-color: #EEEEEE;'); 禁用且灰色 $('#xxx').a
【vue】element form/input/select 组件 赋值后无法编辑的问题
Hypnotic0624的博客
12-08 2394
今天在使用element form组件时，想创建一个修改的dialog ，赋上当前值再修改传后台 开始代码如下 HTML部分： <el-dialog :visible.sync="updateDialogVisible" title="编辑任务" width="50%"> <el-form :model="updateForm" ref="updateForm"> <el-row> <el-form-item lab
html 下拉框disable传不了数据,javascript将下拉框disable之后的提交传值问题
weixin_36073895的博客
06-03 677
javascript将下拉框disable之后，form提交时下拉框的值将不再传回后台。将项目中遇到的实际情况是：整个form都是在后台动态拼接后传回页面进行显示的。所以在网上查找资料时提到的两种常规实现方式都显得不太合适：第一、在select标签外面包一层标签(这种做法实现的效果感觉有点点不和谐)：onmouseout = "firstChild.disabled=false" > 111...
form 表单 input select 输入框接口返回数据不能编辑
qq_16463875的博客
08-27 224
所以这个要搞清楚一点就是对data对象数据初始化的时候进行遍历劫持。然而细心的同学就会发现。我这里Data数据对象是通过方法。那么对于Vue来说。接没有初始化过这个数据，也就没有办法劫持。所以就需要手动来添加劫持方法。让这个对象保持响应式。对于Vue熟练一点的朋友就知道要使用this.$set(对象，属性名，值)来并确保这个新属性同样是响应式的，且触发视图更新。这个可以肯定的一点是数据单项赋值是生效了。所以我们入手就应该从Vue数据绑定的原理来解决问题。那么Vue双向绑定的原理是什么？
设置select下拉框不可修改的→“四”←种方法
了迹奇有没
08-31 1万+
设置select下拉框为不可修改的几种方法： 因为select的特殊性，导致它不能像input表单一样简单地设置一个readonly来限制修改，所以，我们需要进行别的操作！ 1.为下拉框添加样式，可以禁用该下拉框(效果和敲地板差不多)： <select name="name" id="select" class="select" style="pointer-events: none;"></select> 2.为下拉框添加onfocus和onchange方法，可以禁用该下拉框
下拉框禁止编辑权限
游海东的技术专栏
04-17 7769
下拉框禁止编辑权限1、实现源码 下拉框禁止编辑权限 #sel{ width:200px; height:30px; } $(document).ready(function(e) { var sel = $("#sel option:selected").val(); alert(sel); });
如何设制 htmlselect不可编辑 只读
最新发布
09-13
要设置HTML中的`<select>`元素为不可编辑且只读，你可以使用`readonly`属性。设置`readonly`属性后，用户将无法更改`<select>`中的选项值，但与`disabled`属性不同的是，`readonly`的选项仍然可以在表单提交时发送数据。 下面是一个简单的HTML示例，展示了如何将`<select>`设置为只读： ```html <form action="/submit_form" method="post"> <label for="mySelect">选择一个选项:</label> <select id="mySelect" name="mySelect" readonly> <option value="option1">选项1</option> <option value="option2" selected>选项2</option> <option value="option3">选项3</option> </select> <input type="submit" value="提交"> </form> ``` 在这个例子中，`<select>`元素的`readonly`属性确保了用户不能更改下拉菜单中的值，但它的值仍可以作为表单数据提交。请注意，即使设置了`readonly`，用户仍能看到下拉菜单中的选项，并且可以滚动选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值