编程 Javascript

用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"); 
}

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 匿名函数的理解（透彻版)

Jan 28 Javascript

基于jquery完美拖拽，可返回拖动轨迹

Mar 29 Javascript

jQuery 选择表格(table)里的行和列及改变简单样式

Dec 15 Javascript

Node.js模拟浏览器文件上传示例

Mar 26 Javascript

php读取sqlite数据库入门实例代码

Jun 25 Javascript

jquery实现表格中点击相应行变色功能效果【实例代码】

May 09 Javascript

vue中使用localstorage来存储页面信息

Nov 04 Javascript

Vue-cli项目获取本地json文件数据的实例

Mar 07 Javascript

webpack优化的深入理解

Dec 10 Javascript

jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】

Dec 29 jQuery

Vue + ts实现轮播插件的示例

Nov 10 Javascript

微信小程序tab左右滑动切换功能的实现代码

Feb 08 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

ZF等常用php框架中存在的问题

2008/01/10 PHP

PHP 截取字符串专题集合

2010/08/19 PHP

php短域名转换为实际域名函数

2011/01/17 PHP

3种php生成唯一id的方法

2015/11/23 PHP

PHP的反射机制实例详解

2017/03/29 PHP

php7下的filesize函数

2019/09/30 PHP

PHP 多进程与信号中断实现多任务常驻内存管理实例方法

2019/10/04 PHP

关于js new Date() 出现NaN 的分析

2012/10/23 Javascript

百度地图自定义控件分享

2015/03/04 Javascript

深入理解setTimeout函数和setInterval函数

2016/05/20 Javascript

JS前端开发判断是否是手机端并跳转操作（小结）

2017/02/05 Javascript

BootStrap中Table隐藏后显示问题的实现代码

2017/08/31 Javascript

Vue+webpack项目配置便于维护的目录结构教程详解

2018/10/14 Javascript

js实现录音上传功能

2019/11/22 Javascript

node.js中fs文件系统模块的使用方法实例详解

2020/02/13 Javascript

jQuery 动画与停止动画效果实例详解

2020/05/19 jQuery

vue将文件/图片批量打包下载zip的教程

2020/10/21 Javascript

k8s node节点重新加入master集群的实现

2021/02/22 Javascript

Python实现对比不同字体中的同一字符的显示效果

2015/04/23 Python

详谈Python2.6和Python3.0中对除法操作的异同

2017/04/28 Python

Python自定义函数实现求两个数最大公约数、最小公倍数示例

2018/05/21 Python

PyTorch中Tensor的维度变换实现

2019/08/18 Python

Python count函数使用方法实例解析

2020/03/23 Python

Python使用graphviz画流程图过程解析

2020/03/31 Python

python cv2.resize函数high和width注意事项说明

2020/07/05 Python

C++和python实现阿姆斯特朗数字查找实例代码

2020/12/07 Python

软件工程专业推荐信

2013/10/28 职场文书

实习教师个人的自我评价

2013/11/08 职场文书

离婚协议书范文2014（夫妻感情破裂）

2014/12/14 职场文书

贷款担保书

2015/01/20 职场文书

办公室个人总结

2015/02/28 职场文书

导游词之镇江-金山寺

2019/10/14 职场文书

Python 机器学习工具包SKlearn的安装与使用

2021/05/14 Python

关于React Native 无法链接模拟器的问题

2021/06/21 Javascript

python Django框架快速入门教程（后台管理）

2021/07/21 Python

关于JavaScript轮播图的实现

2021/11/20 Javascript