用js设置下拉框为只读的小技巧
更新时间：2014年04月10日 15:35:45 作者：
select没有只读属性，所以需要在select外面包含一个span，通过js来改变,需要的朋友可以参考下
在项目开发过程中我们时常会碰到要设置下拉框为只读（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");
}
做到这里大功告成，试试效果吧！！！
下面这段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");
}
做到这里大功告成，试试效果吧！！！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现翻牌抽奖动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
本篇文章主要介绍了微信小程序实现图片懒加载的示例代码，实现的原理是通过页面预加载图片，对用户体验度会有一定的提高，具有一定的参考价值，有兴趣可以了解一下2017-12-12![用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opear ]](//img.jbzj.com/images/xgimg/bcimg2.png)
用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opear ]
用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opear ]...2007-05-05
ES6增加了很多新的语法，很多同学学习起来感觉很别扭，有时候也不理解新增加的语法有什么用，对ES6的学习也没有兴趣进而动力不足、学习效率不高。下面这篇文章将通过30分钟带大家快速入门掌握ES6/ES2015的核心内容，需要的朋友可以参考下。2018-04-04
curl命令查看请求响应时间的方法非常简单，今天小编抽空给大家介绍下使用Curl命令查看请求响应时间方法，感兴趣的朋友一起看看吧2016-11-11
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
这篇文章主要介绍了javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
Javascript 面象对象成员、共享成员变量实验，需要的朋友可以参考下。2010-11-11
JS使用canvas中的measureText方法测量字体宽度示例
这篇文章主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下2019-02-02
实例分析JS中的相等性判断===、 ==和Object.is()
这篇文章主要给大家介绍了关于JS中相等性判断===、 ==和Object.is()的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-11-11
为了实现这样的数据显示出来三个序列，分别为郑州、新乡、安阳的电量，就需要自己实现对这样数据的转换，转换成如下的形式：2013-08-08
![用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opear ]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论