先来了解下,如何运用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. C++ 动态分配二维和三维数组

    目的:熟悉c++动态内存分配 描述:使用c++程序定义动态数组类,使用new和delete操作符实现动态二维数组和三维数组的定义 //main.cpp //主程序类 #include <iost ...

  2. Android-AndroidStudio Run 'app'安装APK到设备的过程

    1.AndroidStudio 点击Run ‘app’. 2.点击Run ‘app’就会将所有.class文件用SDK工具集处理成.dex, 用SDK工具集将图片/资源/布局文件/AndroidMan ...

  3. error: field 'b' has imcomplete type

    在下面的程序中,在编译时会遇到下面的错误: error: field 'b' has incomplete type 域b是一个不完备的类型,即class B的声明不完备 #include <i ...

  4. unity面试准备

    最近有换工作的打算 所以上网看下面试题 自己做下总结 Q:ArrayList 和 List区别 A: 1:List大家都知道初始化的时候需要定义其类型,例如 List<int> listT ...

  5. 在Linux下启动Java服务的脚本

    #!/bin/sh #该脚本为Linux下启动java程序的通用脚本.即可以作为开机自启动service脚本被调用, #也可以作为启动java程序的独立脚本来使用. # #Author: tudaxi ...

  6. Apache 中httpd.conf文件配置详解(转载)

    httpd.conf文件配置详解   Apache的基本设置主要交由httpd.conf来设定管理,我们要修改Apache的相关设定,主要还是通过修改httpd.cong来实现.下面让我们来看看htt ...

  7. Charles弱网测试

    当前APP网络环境比较复杂,网络制式有2G.3G.4G网络,还有越来越多的公共Wi-Fi.不同的网络环境和网络制式的差异,都会对用户使用app造成一定影响.另外,当前app使用场景多变,如进地铁.上公 ...

  8. 牛客网提高组模拟赛第五场 T1同余方程(异或)(位运算)

    区间不好做,但是我们可以转化成前缀来做.转化为前缀之后之后就是二维前缀和. 但是我还是不怎么会做.所以只能去看吉老师的题解 (确定写的那么简单真的是题解???). 我们要求模一个数余0,就等于找它的倍 ...

  9. scrapy框架基于CrawlSpider的全站数据爬取

    引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...

  10. Levenshtein字符串距离算法介绍

    Levenshtein字符串距离算法介绍 文/开发部 Dimmacro KMP完全匹配算法和 Levenshtein相似度匹配算法是模糊查找匹配字符串中最经典的算法,配合近期技术栏目关于算法的探讨,上 ...