用js设置下拉框为只读

最新推荐文章于 2021-11-26 17:30:09 发布
原创 最新推荐文章于 2021-11-26 17:30:09 发布 · 581 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML

在项目开发过程中我们时常会碰到要设置下拉框为只读（readonly），但是可惜的是select没有只读属性，所以需要在select外面包含一个span，通过js来改变。

下面这段html代码是在struts2的下拉标签中加入了span标签，在页面装载的时候就让下拉框变成不可读。

<body onload="init()">

    <span id="id_select">
       <s:select name="sjdwmc" list="sjdxdwList" listKey="dxbh"  listValue="dwmc" headerKey="" headerValue=""></s:select>
    </span>

</body>

如下是js代码，在init方法中调用selectReadOnly让下拉框变成只读。

/*根据页面上span的id设置select为只读/

function selectReadOnly(selectedId){
  var obj = document.getElementById(selectedId);
     obj.onmouseover = function(){
     obj.setCapture();
    }
    obj.onmouseout = function(){
     obj.releaseCapture();
    }
    obj.onfocus = function(){
     obj.blur();
    }
    obj.onbeforeactivate = function(){
     return false;
    }
 }

function init(){
      selectReadOnly("id_select");
  }

做到这里大功告成，试试效果吧！！！

使用jQuery设置下拉框只读
2301_79326588的博客
09-26 638
在编程中，有时候我们需要将下拉框设置为只读，即用户无法手动选择或修改下拉框的选项。下面是一个详细的示例，展示了如何使用jQuery来设置下拉框为只读状态。属性设置为"disabled"，用户将无法手动选择或修改下拉框的选项。请注意，这只是禁用了用户交互，但仍然允许通过JavaScript代码来动态更改选项。首先，我们在HTML中定义了一个带有id为"mySelect"的下拉框，并添加了几个选项。在JavaScript代码中，我们使用jQuery的。函数的第一个参数是要修改的属性名称，第二个参数是属性的值。
用js设置下拉框为只读的小技巧
12-02
在项目开发过程中我们时常会碰到要设置下拉框为只读（readonly），但是可惜的是select没有只读属性，所以需要在select外面包含一个span，通过js来改变。 下面这段html代码是在struts2的下拉标签中加入了span标签，在页面装载的时候就让下拉框变成不可读。 代码如下: <body onload=”init()”> <span id=”id_select”> <s name=”sjdwmc” list=”sjdxdwList” listKey=”dxbh” listValue=”dwmc” headerKey=”” headerValue=””></s:se
js设置下拉框(select)为只读或编辑示例
445822357
12-09 2715
由于select不像input、textarea有disable和readonly属性,所以只有通过其它方式设置它的只读或编辑.以下是一种方法,代码如下: //设置性别下拉框为只读function setSelectRead(){ var sex=document.getElementById("empSex2"); sex.onclick = function() { var ind...
下拉框设置为只读模式时不再弹出下拉框
12-19
综上所述，要实现"下拉框设置为只读模式时不再弹出下拉框"的功能，我们可以结合使用HTML的`readonly`属性、CSS的`pointer-events`属性以及可能的JavaScript代码来达到预期效果。在提供的`test.html`文件中，应该包含...
js Select下拉框的只读属性设置
唯品衣秀
05-08 4619
因为Select下拉框只支持disabled属性，不支持readOnly属性， 但是用disabled就无法将下拉框中的数据读出来，所以要想办法将select下拉框设置成只读的。 将select下拉框设置成readonly 的两种办法。 第一种： &lt;script&gt;var f=s.selectedIndex&lt;/script&gt; &lt;select name=s ...
设置下拉框为只读
dianbiao3588的博客
01-18 847
下拉框没有readonly=”readonly”属性，也就是这个属性就下拉框而言就不起作用。1.<select onfocus="this.defaultIndex=this.selectedIndex" onchange="this.selectedIndex=this.defaultIndex"></select>给下拉框设置这二个属性可以起到只读的效果，即使...
下拉框设置为只读
jmzzzzz的博客
11-26 1206
使用HTML中的disabled属性 记录一下,以免忘记! 下拉框设置为只读 $("#id名称").attr("disabled",true); 如果直接通过post或者get传值到后台需要先解除disabled属性 $("#id名称").attr("disabled",false);
给下拉框设置只读
IT程序员的成长记
09-29 9123
在文本框里面用readonly给文本框设置只读，而给下拉框设置只读是使用    disabled="disabled"                                                                                                   Order Status
jquery select下拉框操作
12-31 90
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#ss&q
下拉框实现只读状态
内心毫无波动甚至还想笑的博客
06-22 1万+
设置为只读状态有几种方式 1.readonly  2.disabled 但是不能把数据提交到后台 以上2种方法只适用于输入框, 下来框只读状态 没有设置为只读的属性，所以只能用js实现了，下边是在网上找的方法 onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.default
设置下拉选择框和复选框、radio、span只读
weixin_44195615的博客
03-23 2154
1、readonly属性：关联的是页面元素的value属性（例如textbox，设置了readonly就不能修改输入框的文本内容），对select和checkbox不起作用。 2、disabled属性：这个属性的作用是设置页面元素为不可用，即不可进行任何交互操作（包括不可修改value属性、不可修改checked状态等）。但是问题也来了，就是它也不能向后台传递数据了。如需使用可以在表单提交之前，移除这个属性。 （1）先赋值，增加禁止修改的属性。 $("#testId").attr("disabled", "
设置select 框和checkbox框只读
芃蓉蓁蓁的博客
11-18 3417
readonly属性：关联的是页面元素的value属性（例如textbox，设置了readonly就不能修改输入框的文本内容），对select和checkbox不起作用。 disabled属性：这个属性的作用是设置页面元素为不可用，即不可进行任何交互操作（包括不可修改value属性、不可修改checked状态等）。但是问题也来了，就是它也不能向后台传递数据了。如需使用可以在表单提交之前，移除这个属性 $(“#s1”).removeAttr(“disabled”); （1）设置select只读：添加onf.
JS设置select标签为readOnly
热门推荐
小杂馆
09-12 2万+
html中select标签是没有readOnly属性的，只有disabled。但是如果设置其的disabled=true之后，在后台将获取不到这个属性值，怎样可以既让该select只读，又可以在后台获取该select值呢？在这里我说下两种解决方案： 1. 思路：在submit之前，设置其的disabled为false function submitMethod(){     //一系列判断
javascript 设置input和select 框只读属性 获取disabled后的值并传给后台
fn_2015的博客
06-29 1万+
document.getElementById("input").readOnly=true;  //O应大写 input只读属性 有两种方式可以实现input的只读效果：disabled 和 readonly。 自然两种出来的效果都是只能读取不能编辑，可是两者有很大不同。 Disabled说明该input无效，及其value不会传递给任何程序，比如asp、ph
文本框、下拉框设置只读
懒惰的小妖
08-10 6134
在文本框里面给文本框设置只读：readonly="readonly"，但这种设置之后，如果想点击某个按钮触发将这个文本框取消只读，则要在js脚本中禁用，readonly的“o”必须是大写的。而给下拉框设置只读是使用 ：disabled="disabled"属性，若需要添加颜色，用background-color进行对select下拉框设置（背景颜色为灰色）。 eg: 1.&lt;input t...
下拉框设置只读
最新发布
08-12
### 设置 HTML 下拉框为只读状态的方法 在 HTML 中，`<select>` 元素没有 `readonly` 属性，因此不能直接通过 `readonly="readonly"` 来实现只读效果。然而，可以通过多种方式模拟只读行为，确保用户无法手动更改下拉框的值。 #### 方法一：使用 `disabled` 属性 将 `disabled` 属性设置为 `"disabled"` 可以使下拉框变为不可交互状态，用户无法选择新的值。需要注意的是，禁用的 `<select>` 在表单提交时不会传递其值。 ```html <select id="mySelect" disabled="disabled"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` 如果需要在表单提交时包含该值，可以在提交前移除 `disabled` 属性： ```javascript $("#mySelect").removeAttr("disabled"); ``` #### 方法二：使用 JavaScript 阻止用户交互 通过 `onfocus` 和 `onchange` 事件，可以实现类似只读的效果。该方法允许用户点击下拉框，但无法更改其选中值： ```html <select id="mySelect" onfocus="this.defaultIndex=this.selectedIndex" onchange="this.selectedIndex=this.defaultIndex"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` #### 方法三：使用 jQuery 阻止点击事件 通过 jQuery 可以轻松地阻止用户对下拉框的点击操作，从而实现只读效果。此方法不会禁用下拉框，而是通过阻止事件冒泡来防止值的更改： ```html <select id="mySelect"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> ``` ```javascript $(function () { $("#mySelect").click(function () { alert("此处不可选择！"); return false; }); }); ``` #### 方法四：结合 `onmousemove` 和 `onmouseout` 捕获鼠标事件 通过 `onmousemove` 和 `onmouseout` 事件，可以捕获并释放鼠标指针，从而阻止 `<select>` 元素响应鼠标操作： ```html <span onmousemove="this.setCapture();" onmouseout="this.releaseCapture();"> <select id="mySelect" onfocus="this.blur();"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </span> ``` 通过 JavaScript 实现加锁与解锁： ```javascript // 加锁 document.getElementById("mySelect").onfocus = function () { this.blur(); }; // 解锁 document.getElementById("mySelect").onfocus = ""; ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值