本文介绍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. topcoder srm 590 div1 (max_flow_template)

    problem1 link 对于每一个,找到其在目标串中的位置,判断能不能移动即可. problem2 link 如果最后的$limit$为$11=(1011)_{2}$,那么可以分别计算值为$(10 ...

  2. 实体关系图应用——google ads

    实体关系 本页展示了 AdWords 实体的关系图,其中的可点击图片可帮助您找到最合适的文档. 表示法图例 实体:链接到相关性最高的指南. 基数:允许的实例数量.例如,1..\* 表示允许一个或多个. ...

  3. Python3学习笔记-回忆并复述是加强记忆的好方式!

    http://bbs.fishc./thread-35584-1-1.html    #Python好好好 操作系统:linux和mac都自带Python解释器 ->-> -> ID ...

  4. Unity3d外包-就找北京动点软件

    承接Unity3d体感企业项目.游戏项目外包 北京公司.专业团队,成员为专业Unity3d产品公司一线开发人员,有大型产品开发经验: 提供优质的售后服务,保证产品质量,轻量级产品可以提供规范清晰的源代 ...

  5. variable 'o' used without having been completely initialized Compiling Vertex program

    variable 'o' used without having been completely initialized Compiling Vertex program   v2f vert (ap ...

  6. 《Java程序设计》win10系统学前准备

    <Java程序设计>win10系统学前准备 Git的安装 在https://gitforwindows.org/中下载git for windows,下载完成后进行安装.当安装进行到这一步 ...

  7. linux的基本操作概览

    目录 文件路径相关的命令 最重要的一个通配符:* zip相关命令 重定向 三种权限 一些网络操作 安装软件的三种方式 最近开始学习linux的一些基础操作,安装了ubantu 16版本的Linux操作 ...

  8. php 按照中文字母名字排序,并把相应的头像显示出来

    //排序public function getFirstChar($s){ $s0 = mb_substr($s,0,3); //获取名字的姓 $s = iconv('UTF-8','gb2312', ...

  9. Hexo-使用

    hexo 写新文章 创建新的文章 ``` bash $ hexo new "Hexo-使用" ``` 生成md文件 ``` bash $ hexo generate ``` 写文章 ...

  10. zabbix3.4.7官方解释触发器

    函数   描述 参数 说明 abschange   最近获取值与之前获取值差的绝对值.   支持值的类型: float, int, str, text, log 例如: (最近获取值;之前获取值=ab ...