先来了解下,如何运用js实现select动态添加option。

//1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
} //2.添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //方法一:
obj.options.add(new Option("text","value")); //方法二:
for(var i=0;i<10;i++){
obj.options[i]=new Option("新文本","新值"); //方法三:
}
} //3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
} //4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //index,要删除选项的序号
obj.options.remove(index);
} //5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value; //6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
var val = obj.options[index].text; //7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex;
var val = obj.options[index]=new Option("新文本","新值"); //8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

例子中,用到add() 方法

用于向 <select> 添加一个 <option> 元素。

selectObject.add(option,before)

option 必需。要添加选项元素。必需是 option 或 optgroup 元素。
before 必需。在选项数组的该元素之前增加新的元素。如果该参数是null,元素添加到选项数组的末尾。

关于new Option()的更多相关文章

  1. 在 C# 里使用 F# 的 option 变量

    在使用 C# 与 F# 混合编程的时候(通常是使用 C# 实现 GUI,F#负责数据处理),经常会遇到要判断一个 option 是 None 还是 Some.虽然 Option module 里有 i ...

  2. jsPanel插件Option总结

    jsPanel插件Option总结 学习jsPanel之余对相关的选项进行了总结,便于参考. # 选项名称 类别 简要说明 1 autoclose configuration 设置一个时间在毫秒后,面 ...

  3. jquery option

    转--jquery动态添加option示例 http://www.jb51.net/article/45031.htm //js动态添加option var sel= document.getElem ...

  4. 一个解析json串并组装echarts的option的函数解析

    缘起: 在组装echart页面的时候,遇到这样一个问题,它是一个需要在循环内层的时候,同时循环外层,在内层循环中就要将外层获取的值存入,导致了一种纠缠状态,费了老劲儿,终于得到如下解决.记录之,绿色为 ...

  5. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  6. select初始化添加option,通过标签给出回显值,由于回显值和初始化值option中有一个值重复,去重等问题!

    第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...

  7. 解决 odoo.py: error: option --addons-path: The addons-path 'local-addons/' does not seem to a be a valid Addons Directory!

    情况说明 odoo源文件路径-/odoo-dev/odoo/: 我的模块插件路径 ~/odoo-dev/local-addons/my-module 在my-module中创建了__init__.py ...

  8. echarts中显示效果option中必有的属性

    写一个最简单的效果让option中不可缺少的属性. var option = { xAxis:[ //x轴,数组对象,其下至少有一个对象 {.....} ], yAxis:[//y轴,数组对象,其下可 ...

  9. 让 select 的 option 标签支持事件监听(如复制操作)

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  10. 扩展htmlhelper.DropDownListFor 支持list数据源和option增加属性

    mvc自带的DropDownListFor数据源必须是IEnumerable<SelectListItem>.并且option不支持增加自定义属性.在使用bootstrap-select组 ...

随机推荐

  1. centos 7 Hadoop2.7.4完全分布式搭建(一)

    (一)系统准备与安装 1.准备下载centos7 (百度自行下载)可以到开源镜像站下载,速度比较快,比如清华的或者阿里的 在vmware上安装 这里我用的是vmware12 打开Vmware 选择文件 ...

  2. delphi sqlsever 实现存在则更新,不存在

    (' if exists(select * from NBcommission where Type='''+sType+'''and ItemNo='''+s+''' ) '+ ' begin'+ ...

  3. RobotFramework与Jenkins集成后构建成功率高于设置阈值但总是显示失败

    摘要:robot执行后总是失败 1.在配置jenkins的job时,添加构建步骤Execute Windows batch command,输入执行robotframework测试用例命令 2.然后j ...

  4. NuGet文件下载与应用

    nuget是一款.net下强大的包管理开发工具,Visual Studio 2013和Visual Studio 2015都缺省支持Nuget.在线开发能享受到Nuget的便利,但是如果是离线开发,还 ...

  5. 使用System.Data.SQLite及其EF模块操作SQLite数据库(文件)

    SQLite for .NET (System.Data.SQLite) introduction An ADO.NET provider for SQLite including EF and Li ...

  6. iis 部署webapi常见错误及解决方案

    iis 部署webapi常见错误及解决方案 错误一: 原因:asp.net web api部署在Windows服务器上后,按照WebAPI定义的路由访问,老是出现404,但定义一个静态文件从站点访问, ...

  7. FTP ftp部署遇到问题

    FTP  ftp部署遇到问题 一. 二.

  8. python中readline判断文件读取结束的方法

    注:内容来自网络 本文实例讲述了python中readline判断文件读取结束的方法.分享给大家供大家参考.具体分析如下: 大家知道,python中按行读取文件可以使用readline函数,下面现介绍 ...

  9. 【07】循序渐进学 docker:数据持久化

    写在前面的话 学到这里相信有心的朋友都发现问题了,我们每次都会去删掉容器,在创建新的容器.那数据怎么办?岂不删库跑路了? 就算不是数据库,假设公司有日志保留的需求,那每一次发布岂不日志都被干掉了? D ...

  10. chipmunk 物理引擎的基本概念和基本用法

    chipmunk是一个开源2D物理引擎, 项目主页:http://code.google.com/p/chipmunk-physics/ 工作需要研究了一下,这个引擎的资料还是不多,我阅读了所有的文档 ...