javascript select标签的操作
用原生的方法对select标签的增删操作
1、选中某一个option,一般采用 option[i].selected = true
2、添加option首先需要创建一个option的节点,然后插入到select,下面介绍了两种办法add(new Option)和document.createElement("option")
3、删除option节点,下面介绍三种方法removeChild()、或者直接设置节点为null或者采用remove的方法循环删除节点
<select id="select">
<option value="1">1</option>
<option value="2">2</option>
</select> <button onclick="AddOption()">添加子项目</button>
<button onclick="newOption()">添加子项目</button>
<button onclick="onOption()">选中子项目</button>
<button onclick="removeOption()">删除子项目</button>
<button onclick="nulloption()">删除子项目</button> <select id="select1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button onclick="clearSelectboxMain()">删除子项目</button> <script>
var i = document.getElementById("select");
var j = document.getElementById("select1");
function clearSelectboxMain() {
clearSelectbox(j);
} function onOption() {
i.options[1].selected = true; //选中第二个
} //添加
function AddOption() {
i.add(new Option(3, 3), undefined); //添加选项,第二个参数为undefined是为了兼容IE和支持DOM的浏览器
} function newOption() {
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("4"));
newOption.setAttribute("value", 4);
i.appendChild(newOption);
} //清除
function removeOption() {
i.removeChild(i.options[0]); //移除子项目的方法
} function nulloption() {
i.options[2] = null; //将子项目设置为空
} function clearSelectbox(selectbox) {
for (var i = 0, len = selectbox.options.length; i < len; i++) {
selectbox.remove(i);
}
}
</script>
javascript select标签的操作的更多相关文章
- javascript——select 标签的使用
<% String state = (String) request.getAttribute("state"); String day = (String) request ...
- JavaScript 获取Select标签选中的项
<select name="select1" id="select1" onchange=setInput()> <option value= ...
- 吾八哥学Selenium(四):操作下拉框select标签的方法
我们在做web页面自动化测试的时候会经常遇到<select></select>标签的下拉框,那么在Python里如何实现去操作这种控件呢?今天就给大家分享一下这个玩法.为了让大 ...
- Jquery操作select标签的常用方法
<select id="search"> <option value='1'>baidu</option> <option value=' ...
- web自动化之Select标签操作
from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...
- JS实现列表移动(通过DOM操作select标签)
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现 select 标签的移动 实现代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- select标签操作
//遍历select标签 WebElement select = driver.findElement(By.tagName("select")); List<WebElem ...
- HTML中的<select>标签如何设置默认选中的选项
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- 关于js中select的简单操作,以及js前台计算,span简单操作
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 【springBoot】之定制Banner
springboot启动时控制台打印图案如下: 1.假如我们不想看到这个图案 public static void main(String[] args) { SpringApplication ap ...
- C++进阶--placement new/delete
//############################################################################ // Placement New 和 Pl ...
- hadoop-n.x.y-src.tar.gz 、hadoop-n.x.y-src.tar.gz.asc 、hadoop-n.x.y-src.tar.gz.md5 、hadoop-n.x.y-src.tar.gz.mds是什么?
不多说,直接上干货! 我这里,以hadoop-2.6.0为例. hadoop-n.x.y.tar.gz.mds,此mds文件是为了检验在下载和移动文件过程中文件的完整性. 通过验证文件的md5值去检验 ...
- qsort实现结构体数组排序
要注意强制转换 #include <stdio.h> #include <stdlib.h> typedef struct{ int num; char name[20]; f ...
- android scrollview listview显示不全
原来处理方法是重写ListView import android.content.Context; import android.util.AttributeSet; import android.v ...
- win server 2008 R2 支持
安装Microsoft Visual C++ 2010 可再发行组件包 (x64) vcredist_x64.exe 安装Microsoft .NET Framework 4 dotNetFx40_F ...
- Jmeter(二)Jmeter目录介绍
看过许多有关Jmeter的博客,算得上的收获颇丰:不过最牛逼的博客还是“官方文档”,官方文档是ApacheJmeter自己对自己产品的说明,论起对自己产品的理解程度,那肯定是自己嘛...因此推荐大家从 ...
- centos 7 修改host文件
centos7与之前的版本都不一样,修改主机名在/ect/hostname 和/ect/hosts 这两个文件控制 首先修改/etc/hostname vi /etc/hostname 打开之后的内容 ...
- matplotlib基础知识全面解析
图像基本知识: 通常情况下,我们可以将一副Matplotlib图像分成三层结构: 1.第一层是底层的容器层,主要包括Canvas.Figure.Axes: 2.第二层是辅助显示层,主要包括Axis.S ...
- CentOS之RPM
yum工具比RPM工具好用,所以直接介绍yum工具来管理RPM包. yum list |head -n 20 列出所有RPM资源. yum search vim 搜索RPM包vim yum inst ...