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

JS对select控件option选项的增删改查示例代码_javascript技巧

php中文网
发布： 2016-05-16 17:19:31
原创
1068人浏览过

Javascript 操作select是表单中常见的一种,下面介绍几种常用的JS动态操作select中的各种方法：

Vizard
Vizard

AI驱动的视频编辑器

Vizard 101
查看详情 Vizard
复制代码 代码如下:

//动态创建select
function createSelect()
{
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

复制代码 代码如下:

//添加选项option
function addOption()
{
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

复制代码 代码如下:

//删除所有选项option
function removeAll()
{
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

复制代码 代码如下:

//删除一个选项option
function removeOne()
{
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

复制代码 代码如下:

//获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

复制代码 代码如下:

//修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：javascript代码运行不出来执行错误的可能情况整理_基础知识 下一篇：js传参数受特殊字符影响错误的解决方法_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
前端测试框架_javascript单元测试 Jest、Mocha、Vitest和Karma是主流JavaScript测试框架，Jest因其易用性和强大功能成为React项目首选；通过编写简单加法函数测试示例，展示了测试用例的基本结构；针对异步代码和API请求，可使用jest.mock和jest.fn实现模拟；结合覆盖率报告与CI/CD持续集成，提升代码质量与项目稳定性。
2025-11-27 19:53:12
850
现代JavaScript_装饰器元数据 JavaScript装饰器（Stage3）通过@语法增强类成员功能，结合reflect-metadata可实现元数据存储与依赖注入。示例包括log装饰器记录方法调用，Required标记必填属性，Injectable与Inject实现DI容器解析，需配置tsconfig启用experimentalDecorators和emitDecoratorMetadata。
2025-11-27 19:53:02
634
JavaScript函数组合_柯里化与管道操作符技巧 函数组合结合柯里化与管道操作符可提升代码可读性与复用性。1.柯里化将多参函数转化为单参函数链，支持部分应用；2.pipe函数实现从左到右的函数组合，构建清晰的数据处理流程；3.实际应用中，通过定义trim、toUpperCase、addPrefix等柯里化函数，并用pipe组合，可优雅实现文本处理逻辑；4.实验性管道操作符（|>）语法更简洁，类似Unix管道，但需Babel支持。掌握这些技术能让JavaScript函数式编程更优雅。
2025-11-27 19:49:19
728
JavaScript构建工具_Webpack与Vite配置深度优化 Webpack适合复杂项目，通过优化loader、缓存和代码分割提升性能；Vite利用ESM实现极速开发体验，配置简洁，默认集成佳，新项目首选。
2025-11-27 19:48:06
328
JavaScript事件代理_事件冒泡机制 事件冒泡是事件从目标元素逐级向上传播至根节点的过程，事件代理利用此机制将事件绑定到父元素，通过判断event.target实现子元素事件处理，减少内存占用并支持动态元素。
2025-11-27 19:47:02
666
JavaScript静态站点_Gatsby.js构建博客系统 选择Gatsby.js因性能优异、数据灵活和现代化开发体验，它基于React和GraphQL，通过静态生成提升加载速度与SEO；使用gatsbynew创建项目，添加Markdown文章并配置frontmatter，自定义布局与插件扩展功能，最后执行gatsbybuild部署至Netlify等平台完成发布。
2025-11-27 19:45:34
857
JavaScript元编程_Proxy与Reflect高级应用技巧 Proxy与Reflect配合可实现对象操作的拦截与默认行为调用，用于构建响应式系统、私有属性模拟和函数装饰器等场景，提升代码灵活性与可维护性。
2025-11-27 19:44:02
432
JavaScript打包优化_代码分割与懒加载策略 代码分割与懒加载通过拆分bundle并按需加载，降低首屏体积。1.使用SplitChunksPlugin提取公共模块；2.路由级懒加载实现SPA按需加载；3.条件性加载低频功能模块；4.结合预加载与预获取优化体验，合理控制拆分粒度以提升性能。
2025-11-27 19:43:02
643
深入理解JavaScript原型_面向对象编程实践 JavaScript的面向对象基于原型而非类，ES6的class是语法糖，底层仍用原型链实现继承。对象通过__proto__指向原型，查找属性时沿原型链向上追溯。函数的prototype属性被实例继承，new操作生成的对象原型指向构造函数的prototype。继承通过Object.create(父类.prototype)实现，子类原型链连接到父类，同时需修正constructor指向。class语法更简洁，但extends本质仍是原型链继承，掌握原型机制才能深入理解JavaScript对象模型。
2025-11-27 19:40:02
417
JavaScript数组扁平化_多维数组处理 数组扁平化是将多维数组转为一维的过程，常用方法包括：1.使用flat()方法（ES2019），支持指定层数或Infinity彻底展开；2.递归结合reduce实现，兼容性好且灵活；3.toString后split仅适用于纯数字数组；4.扁平化同时去重可结合flat(Infinity)与Set。日常推荐优先使用flat()。
2025-11-27 19:38:32
594
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部