本文介绍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. selenium+java利用AutoIT实现文件上传

    转自https://www.cnblogs.com/yunman/p/7112882.html?utm_source=itdadao&utm_medium=referral 1.AutoIT介 ...

  2. 微信小程序unionid获取问题

    微信小程序使用login获取unionid时可能获取不到,原因可能是该微信账号没有关注小程序所在公众号等.但在微信小程序中使用微信注册,必须要用unionid注册时,大部分用户就会因此无法注册成功. ...

  3. [shell]输出内容到剪切板

    commandline和GUI下的clipboard的交互Mac下echo $PATH | pbcopy,copy to clipboardecho "$(pbpaste -Prefer t ...

  4. 《温故而知新》JAVA基础一

    一:基本环境 种类 javaSE(核心语法)+javaME(移动设备)+Java EE(JSP/服务等) JVM(java虚拟机) abc.java(源文件)--编译器--abc.class 字节码文 ...

  5. oracle 11 g release 2 卸载

    Win 10 系统,Oracle 11 g R 2 ,安装目录C盘根目录 1.停止Oracle的所有服务 打开“服务”窗口,关闭Oracle的所有服务 2.运行Oracle Universal Ins ...

  6. 表单提交:button input submit 的区别

    http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践 ...

  7. 机器学习实战1-1 KNN电影分类遇到的问题

    为什么电脑排版效果和手机排版效果不一样~ 目前只学习了python的基础语法,有些东西理解的不透彻,希望能一边看<机器学习实战>,一边加深对python的理解,所以写的内容很浅显,也许还会 ...

  8. QT编程环境

    (1)QT的工具 ① assistant 帮助手册 ② qmake -v 查看qt版本 ③ qmake -project 可以把项目的源文件组织成项目的描述文件 .pro ④ qmake 可以根据.p ...

  9. JxBrowser之四:对Http Response Code的处理

    1.由于各种原因,客户端或者服务端都可能出现err,比如服务端无响应的504 Gateway Time-out 4×× 客户错误 5×× 服务器错误 2.使用下面代码,当发生错误时,重新加载对应的ur ...

  10. 在win上配置linux虚拟机图解

    首先,先下载安装vmware,cpu的类型不支持AMD. 一直点下一步完成安装.