用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 02 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
简单实现node.js图片上传
Dec 18 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
简单的网页广告特效实例
Aug 19 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
js实现列表向上无限滚动
Jan 13 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php 分页函数multi() discuz
2009/06/21 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Scrapy的简单使用教程
2017/10/24 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
环保建议书作文
2014/03/12 职场文书
社区娱乐活动方案
2014/08/21 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书