用js设置下拉框为只读的小技巧


Posted in Javascript onApril 10, 2014

在项目开发过程中我们时常会碰到要设置下拉框为只读(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"); 
}

做到这里大功告成,试试效果吧!!!
Javascript 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
Move.js入门
Feb 08 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
js获取上传文件大小示例代码
Apr 10 #Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 #Javascript
js实现图片旋转的三种方法
Apr 10 #Javascript
javascript:void(0)的问题使用探讨
Apr 10 #Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 #Javascript
You might like
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
php微信开发之谷歌测距
2018/06/14 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
Python re模块介绍
2014/11/30 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
什么是规则表达式
2012/05/03 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
节电标语大全
2014/06/23 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
颐和园的导游词
2015/01/30 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python