先来了解下,如何运用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. unigui不是单个网页相应的链接,而是整体Web Application,如何把webApp的子功能映射到微信公众号菜单?

    只需要用UniApplication.Parameters.Values[‘xxx’]读取url的参数然后调用就可以 例如:要打开公众号菜单的取样送检指南查询模块,在自定义菜单设定:http://ww ...

  2. on where having总结

    1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表中得到.ON和WHERE后面所跟限制条件的区别,主要与限制条件起作用的时机有关, ON根据限制条件对数据库记录进 ...

  3. django view function

    view function 的几种返回值 return HttpResponse(html) return HttpResponseNotFound(html) raise Http404(" ...

  4. Flash Builder 4.6/4.7 注释以及字体大小修改

    ①修改字体颜色.粗体.斜体.下划线 英文版:windows-preferences-flex-editors-syntex coloring-ActionScript-Comment 汉化版:窗口—首 ...

  5. 十大javaScript框架

    http://blog.163.com/hongshaoguoguo@126/blog/static/180469812012102645931862/ Prototype特点:一个非常优雅的JS库, ...

  6. django2使用xadmin打造适合国人的后台管理系统(1)

    python火了之后,学习python的人也越来越多了,python做web开发的话,flask.django是比较火的框架了,django是一个比较大的框架,也是一个快速开发利器.但是,django ...

  7. 极光开发者沙龙 JIGUANG MEETUP —— 移动应用性能优化实践

    活动背景 移动互联网时代,各大互联网公司都已将自己的产品和服务全面移动化,各类新产品功能都会优先在移动 App 上尝试. 应用性能作为影响用户体验最重要的因素,在开发过程中显得尤为重要. 用户网络环境 ...

  8. webpack2的一些使用入门

    首先创建一个webpack文件夹我取名叫webpackVue(为了后续把vue集成进来) 1.首先用npm初始化一下,在这个目录下,执行npm init 2.npm install webpack - ...

  9. js中奇怪的问题 同步ajax,modal遮罩层

    奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...

  10. TX2之多线程读取视频及深度学习推理

    背景 一般在TX2上部署深度学习模型时,都是读取摄像头视频或传入视频文件进行推理,从视频中抽取帧进行目标检测等任务.对于大点的模型,推理的速度是赶不上摄像头或视频的帧率的,如果我们使用单线程进行处理, ...