讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 16:52:59
原创
1659人浏览过

在项目开发过程中我们时常会碰到要设置下拉框为只读（readonly），但是可惜的是select没有只读属性，所以需要在select外面包含一个span，通过js来改变。

下面这段html代码是在struts2的下拉标签中加入了span标签，在页面装载的时候就让下拉框变成不可读。

启科网络PHP商城系统
启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

启科网络PHP商城系统 0
查看详情 启科网络PHP商城系统
复制代码 代码如下:


如下是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");
}

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

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：js定时调用方法成功后并停止调用示例_javascript技巧 下一篇：jquery查找父元素、子元素(个人经验总结)_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
为什么JavaScript的动画需要requestAnimationFrame_它与CSS动画有何不同？ requestAnimationFrame（rAF）不是必须，而是为匹配屏幕刷新节奏、避免丢帧、节省资源；它自动对齐刷新率、页面不可见时暂停、比定时器更精准节能，并保证回调在渲染前执行。
2025-12-16 20:09:08
969
什么是JavaScript的Web Workers_它如何实现多线程编程呢 WebWorkers是JavaScript在后台线程运行脚本的机制，通过独立隔离的执行环境实现并发，避免阻塞主线程；每个Worker有独立上下文、无DOM访问权，通信靠postMessage和message事件，支持结构化克隆与transferableobjects零拷贝。
2025-12-16 20:05:03
605
如何调试javascript_有哪些高效的调试技巧？ 最有效的JavaScript调试方式是熟练使用浏览器开发者工具并培养良好调试习惯。善用断点（含条件断点）、debugger语句、Sources面板三大区域、Network与Console联动、Elements与Console协作，将高频操作练成肌肉记忆。
2025-12-16 20:04:02
499
javascript如何实现组合函数_它如何工作 组合函数是将多个一元函数按顺序串联执行的编程模式，pipe从左到右执行如h(g(f(x)))，compose从右到左执行如f(g(h(x)))，提升代码可读性、复用性与可测试性。
2025-12-16 19:53:27
939
javascript Service Worker是什么_如何用它创建离线应用？ ServiceWorker是运行在主线程外的可编程网络代理，支持离线访问、消息推送等，需HTTPS部署（localhost除外），通过install/fetch事件实现缓存与离线响应。
2025-12-16 19:49:04
175
如何创建函数_javascript中有哪些方式？ JavaScript创建函数有四种方式：函数声明（具名、可提升）、函数表达式（匿名或具名、不可提升）、箭头函数（无this/arguments、不可构造）、Function构造函数（动态生成、性能差）。
2025-12-16 19:47:04
539
javascript怎样进行数组的排序与过滤？_javascript的高阶函数有哪些应用场景？ JavaScript数组排序需用sort()配合比较函数（如a-b），过滤用filter()返回新数组；二者均为高阶函数，体现“函数可传参”思想，支撑链式操作与逻辑复用。
2025-12-16 19:45:08
644
JavaScript Babel是什么_它如何转换代码？ Babel是一个JavaScript编译器，通过解析→转换→生成三步基于AST将新语法（如可选链、箭头函数）转为旧环境兼容代码，支持按browserslist配置自动降级，但不处理API补丁。
2025-12-16 19:43:37
167
JavaScript中的正则表达式是什么_它如何匹配和处理文本呢 JavaScript正则表达式是用于匹配、查找、替换文本模式的对象，支持字面量和构造函数两种创建方式，含g/i/m等标志，提供match/test/replace/split等方法，依赖\d/\w/\s/+/*/？/^/$/\b等元字符及捕获组实现精准文本处理。
2025-12-16 19:37:33
204
javascript的blob是什么_如何处理二进制数据？ Blob是JavaScript中表示不可变原始二进制数据的内置对象，用于安全高效封装文件、图片等非文本内容；其不可修改、支持MIME类型标记、需通过URL.createObjectURL或FileReader等桥接操作。
2025-12-16 19:33:02
457
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部