本文介绍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. 剑指offer(23)二叉搜索树的后序遍历序列

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 题目分析 1.后续遍历我们可以知道,最右边的是根节 ...

  2. 用mint-ui picker组件 实现省市区三级联动

    公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表 ...

  3. CSS3 3D酷炫立方体变换动画

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象. 先给大家看看完成的效果,代 ...

  4. Arch Linux安装后的一些初始设置简介

    配置有线网络. 没网络的时候,可以直接设定ip应急,后面 netctl 才是正规设置: # ip addr add 192.168.0.100/24 dev enp0s4# ip link set d ...

  5. [从零开始搭网站八]CentOS使用yum安装Redis的方法

    1.由于centOS官方yum源里面没有Redis,这里我们需要安装一个第三方的yum源,这里用了fedora的epel仓库 yum install epel-release 安装过程中会有让你确认的 ...

  6. java笔记 -- java变量与常量的声明

    变量: 在Java中, 每一个变量属于一种类型. double salary int vacationDays; long earthPopulation; boolean done; 命名: 以字母 ...

  7. 力扣(LeetCode) 821. 字符的最短距离

    给定一个字符串 S 和一个字符 C.返回一个代表字符串 S 中每个字符到字符串 S 中的字符 C 的最短距离的数组. 示例 1: 输入: S = "loveleetcode", C ...

  8. C#时间戳的简单实现

    Introduction: 在项目开发中,我们都经常会用到时间戳来进行时间的存储和传递,最常用的Unix时间戳(TimeStamp)是指格林尼治时间1970年1月1日0时(北京时间1970年1月1日8 ...

  9. 强化git

    [场景1]git 提交本地代码到远程master 1.git init 2.git add . 3.git commit -m " " 4.git remote add origi ...

  10. 『TensorFlow』读书笔记_Inception_V3_下

    极为庞大的网络结构,不过下一节的ResNet也不小 线性的组成,结构大体如下: 常规卷积部分->Inception模块组1->Inception模块组2->Inception模块组3 ...