本文介绍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. Java 爬虫学习

    Java爬虫领域最强大的框架是JSoup:可直接解析具体的URL地址(即解析对应的HTML),提供了一套强大的API,包括可以通过DOM.CSS选择器,即类似jQuery方式来取出和操作数据.主要功能 ...

  2. PotPlayer安装与配置

    目录 1.简介 2.安装 3.设置 基本选项设置: 播放选项设置: PotPlayer皮肤设置: 1.简介 PotPlayer一款小巧简单的视频播放软件,具有于强大的定制能力和个性化功能. 2.安装 ...

  3. 浅谈Final

    Java关键字final有“这是无法改变的”或者“终态的”含义,final可以修饰非抽象类.非抽象类成员方法和变量. final类不能被继承,没有子类,final类中的方法默认是final的.fina ...

  4. ADC配置成定时器触发的启发

    百度文库:https://wenku.baidu.com/view/99d39413f78a6529647d5344.html STM32关于使用定时器触发ADC转换的解决办法和详细说明 本人在使用S ...

  5. fcn+caffe+siftflow实验记录

    环境搭建: vs2013,编译caffe工程,cuda8.0,cudnn5.1,python2.7. 还需要安装python的一些包.Numpy+mkl  scipy  matplotlib  sci ...

  6. java连接Access数据库的两种方法

    where ziduan  in(select  ziduan from  table) 嵌套 ResultSet rs = pst.executeQuery();List list = new Ar ...

  7. http content-type 与 java后端处理

    http中的常用的content-type有: application/x-www-form-urlencoded;charset=UTF-8  传递表单类数据 application/json;ch ...

  8. 2019清明期间qbxt培训qwq

    4.4上午:数学基础 (qwq整成word和cpp了,它居然不能直接把文档附上来) part 1:高精度运算 高精加和高精减就不说了,之前写过博客了qwq,讲一讲高精乘和高精除吧. 1.高精度乘法(不 ...

  9. python自动化测试入门篇-jemter连接mysql数据库

    jmeter对数据库的操作主要包括以下几个步骤:1.导入mysqlde jdbc的jar包:2.创建数据库连接配置:3.线程组添加jdbc request;4.启动按钮,添加查看结果树 一.准备好驱动 ...

  10. vue2.0 实现富文本编辑器功能

    前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小 ...