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

 select没有只读属性,所以需要在select外面包含一个span,通过js来改变,需要的朋友可以参考下

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

 
做到这里大功告成,试试效果吧!!! 

时间: 2024-12-30 22:15:57

用js设置下拉框为只读的小技巧的相关文章

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

在项目开发过程中我们时常会碰到要设置下拉框为只读(readonly),但是可惜的是select没有只读属性,所以需要在select外面包含一个span,通过js来改变. 下面这段html代码是在struts2的下拉标签中加入了span标签,在页面装载的时候就让下拉框变成不可读. 复制代码 代码如下: <body onload="init()"> <span id="id_select"> <s:select name="sjd

js实现下拉框选择要显示图片的方法

 这篇文章主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js实现下拉框选择要显示图片的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 <html> <title>下拉框选择要显示的图片</title> <body> <img width=320 height=240 src="images

Js获取下拉框选定项的值和文本的实现代码

 本篇文章主要是对Js获取下拉框选定项的值和文本的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误!   下面我总结下Firefox和IE下获取下拉框选定项的值和文本:   1. IE和Firefox都支持的方法: 获取文本    代码如下: var obj=document.getElementById('select_template'

js实现下拉框选择要显示图片的方法_javascript技巧

本文实例讲述了js实现下拉框选择要显示图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>下拉框选择要显示的图片</title> <body> <img width=320 height=240 src="images/m01.jpg" name="x1"> <SELECT onChange="document.x1.src=options[selectedIn

easy ui 如何设置下拉框 默认值的颜色

问题描述 easy ui 如何设置下拉框 默认值的颜色 下拉列表的数据:请输入** ,"请输入 "设置为灰色,但下拉列表的数据显示为黑色字体颜色 如何做?求大神指点 解决方案 div默认的下拉而已,获取第一个项目设置为灰色就行了 $('#cb').combobox('panel').find('div:first').css('color','#999')

JS实现下拉框的动态添加(附效果)_javascript技巧

效果展示: 页面初加载时:      选择车类型后:      选择车颜色后:     JS实现下拉框的动态添加,网页代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

Js获取下拉框选定项的值和文本的实现代码_javascript技巧

Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和文本: 1. IE和Firefox都支持的方法:获取文本 复制代码 代码如下: var obj=document.getElementById('select_template'); var text=obj.options[obj.selectedIndex].text;//获取文本  var o

JS获取下拉框显示值和判断单选按钮的方法_javascript技巧

本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法.分享给大家供大家参考.具体如下: 1.本人做过很多项目,都需要得到select组件显示的值.下面是我经常用到的方法: Html源码如下: <html><body> <select id="province" name="province" > <option value="1">北京</option> <option valu

快速解决js开发下拉框中blur与click冲突_javascript技巧

在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以. click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 <input type="text" id="tel"&g