本文介绍select添加option的两种方法

1、使用selectObject.add(option,before)方法,其中

option为要添加选项元素。必需是 option 或 optgroup 元素

before为在选项数组的该元素之前增加新的元素。如果该参数是null,元素添加到选项数组的末尾

2、new一个option对象,然后把它添加到select中

dom结构如下:

<select name="mySelect" id="mySelect">
<option value="请选择">请选择</option>
</select>

js代码如下:

var mySelect = document.getElementById("mySelect");
var addOption1 = function(select,txt,value,num){
select.add(new Option(txt,value),num);
}
var addOption2 = function(select,txt,value){
var opt = new Option(txt,value);
console.log(typeof opt)
select.appendChild(opt);
}
addOption1(mySelect,"A","a");
addOption1(mySelect,"first","1",0);
addOption2(mySelect,"B","b");

效果如下:

如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

select添加option的更多相关文章

  1. 纯js遍历json获取值动态为select添加option

    遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...

  2. JavaScript为select添加option,select选项变化时的处理,获取slelect被选中的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js为select添加option

    <select id="shi"> function loadInfo(){ var shengId=document.getElementById("she ...

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

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

  5. select元素添加option的add()方法 | try{}catch{}

    1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...

  6. select 中添加option的注意

    在平时写JS中经常要给Select添加option,如果我们把option中的数据用一个字符串来表示: eg: var strOption='<option>1</option> ...

  7. select 动态添加option函数

    转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用!  ... /** * 功能:select对象动态添加Opt ...

  8. layui select动态添加option

    <form class="layui-form" action=""> <div class="layui-form-item pr ...

  9. IE8下JQuery clone 出的select元素使用append添加option异常解决记录

    遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone, HTML代码中包括select标签, 在克隆之后需要对select进行添加option. 在firefo ...

随机推荐

  1. centos7 install nginx+fastdfs

    说明:centos7单机部署 nginx fastdfs ## 创建一下目录作为存储数据图片的路径 可以自己定义 mkdir -pv /data/application/{storage,tracke ...

  2. 创成汇丨投脑风暴·创心不止|路演日 第2期,寻IT创业者

    创成汇丨投脑风暴·创心不止|路演日 第2期   无畏荆棘之路的风雨 誓做浪潮之巅的勇者 你说,创业是一场孤注一掷的较量 你说,创新从来都是与过去battle 你还说,坚持总是比开始更让你难以琢磨 所以 ...

  3. HAOI(多省联考)2019退役记

    等着回头写 算了今天先写点 Day -1 打扫下机房,不想写题,不想考试.... Day 0 上午颓了一上午 下午看下考场结果去早了 ZYZ 全员进队! Day 1 上来T1,01Tire!,开码,半 ...

  4. 【HNOI 2018】寻宝游戏

    Problem Description 某大学每年都会有一次 \(Mystery\ Hunt\) 的活动,玩家需要根据设置的线索解谜,找到宝藏的位置,前一年获胜的队伍可以获得这一年出题的机会. 作为新 ...

  5. robot framework学习五——AutoltLibrary库

    安装中遇到的问题: 安装好了AutoItLibrary,但是导入到RIDE后,仍然红色显示 搜索了下解决办法,说要安装下autoit-v3-setup.exe https://www.autoitsc ...

  6. windows下如何批量修改文件名

    windows下如何批量修改文件名 一.总结 一句话总结:就是用excel生成了多条修改文件名的dos命令然后执行,比较核心的就是把图片名称导入excel 将图片名称导入excel---编写如下DOS ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

  8. caffe-windows画loss与accuracy曲线

    参考博客: http://blog.csdn.net/sunshine_in_moon/article/details/53541573 进入tools/extra/文件夹中,修改plot_train ...

  9. spoj1433 KPSUM

    题意:略: 首先知道10,20,......100,200,1000的前面的符号都是负号. 举具体例子:221时,计算过程为 000-009,     010-019,   020-029...... ...

  10. hdu-5009 Paint Pearls DP+双向链表 with Map实现去重优化

    http://acm.hdu.edu.cn/showproblem.php?pid=5009 题目要求对空序列染成目标颜色序列,对一段序列染色的成本是不同颜色数的平方. 这题我们显然会首先想到用DP去 ...