编程 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 布尔型分析

Dec 22 Javascript

javascript 传统事件模型构造的事件监听器实现代码

May 31 Javascript

动态获取复选框checkbox选中个数的jquery代码

Jun 25 Javascript

GridView中获取被点击行中的DropDownList和TextBox中的值

Jul 18 Javascript

前端JS面试中常见的算法问题总结

Dec 23 Javascript

bootstrap laydate日期组件使用详解

Jan 04 Javascript

详解VUE的状态控制与延时加载刷新

Mar 27 Javascript

node.js（express）中使用Jcrop进行图片剪切上传功能

Apr 21 Javascript

HTML5+JS+JQuery+ECharts实现异步加载问题

Dec 16 jQuery

vue2.0 实现导航守卫的具体用法（路由守卫）

May 17 Javascript

node学习笔记之读写文件与开启第一个web服务器操作示例

May 29 Javascript

基于Element封装一个表格组件tableList的使用方法

Jun 29 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