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 ...
随机推荐
- ALGO-18_蓝桥杯_算法训练_单词接龙(搜索)
问题描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- 【springBoot】之starter pom
SpringBoot针对不同业务提供了不同的starter pom,根据springboot版本不同可能有差异. spring-boot-starter springboot核心starter ,包括 ...
- FB工作流相关
1.初始化项目 gitlab上建立一个仓库 在命令行中运行git clone,将仓库克隆到本地 在命令行中找到前端模版文件(模版文件夹(front-template)有个sao.js脚本,用来在本地按 ...
- 服务注册发现consul之二:在Spring Cloud中使用Consul实现服务的注册和发现
首先安装consul环境,参照之前的文章:<服务注册发现consul之一:consul介绍及安装>中的第一节介绍. Spring Cloud使用Consul的服务与发现 1.导入依赖pri ...
- 面试总结之Google
准备Google面试的总结 - 知乎 https://zhuanlan.zhihu.com/p/40866467 [不周山之算法与数据结构]壹 总览 | 小土刀 https://wdxtub.com/ ...
- Tomcat7启动分析(三)Digester的使用(转载)
原文 http://tyrion.iteye.com/blog/1912290 前一篇文章里最后看到Bootstrap的main方法最后会调用org.apache.catalina.startup.C ...
- 保存chrome主题背景的图片
chrome主题背景的图怎样可以保存下来? 在chrome地址栏中输入: chrome://theme/IDR_THEME_NTP_BACKGROUND?npebkpkiddfadallfhefpip ...
- 关于虚拟机下centOS版linux系统ifconfig只显示inet6ip,不显示inet4ip的问题
在linux命令窗口输入ifconfig会显示如下 [root@localhost Desktop]# ifconfig eth0 Link encap:Ethernet HWaddr 00:0 ...
- nginx file not found 错误处理小记
安装完php php-fpm nginx 后访问php出现file not found错误,html就没问题配置文件server 段如下 server { listen 80; server_name ...
- 凭什么说AMQP比JMS优秀啊?JMS才是真正实现了一个客户端调用多种产品的消息中间件啊
一.AMQP 历史 消息队列(Message Queue)起源于一位来自 MIT 的硬件设计教育工作者 Vivek Ranadivé 设想了一种通用软件总线,就像主板上的总线那样,供其他应用程序接入 ...