用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编程起步(第一课)
Jan 10 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
浅析javascript中的DOM
Mar 01 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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
世界收音机发展史
2021/03/01 无线电
用php守护另一个php进程的例子
2015/02/13 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python实现简单加密解密机制
2019/03/19 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python字符串对象实现原理详解
2019/07/01 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
HTML5标签小集
2011/08/02 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
教师自荐信
2013/12/10 职场文书
青年教师培训方案
2014/02/06 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
公司会议开幕词
2015/01/29 职场文书
档案工作个人总结
2015/03/03 职场文书
大学生读书笔记大全
2015/07/01 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技