用原生的方法对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标签的操作的更多相关文章

  1. javascript——select 标签的使用

    <% String state = (String) request.getAttribute("state"); String day = (String) request ...

  2. JavaScript 获取Select标签选中的项

    <select name="select1" id="select1" onchange=setInput()> <option value= ...

  3. 吾八哥学Selenium(四):操作下拉框select标签的方法

    我们在做web页面自动化测试的时候会经常遇到<select></select>标签的下拉框,那么在Python里如何实现去操作这种控件呢?今天就给大家分享一下这个玩法.为了让大 ...

  4. Jquery操作select标签的常用方法

    <select id="search"> <option value='1'>baidu</option> <option value=' ...

  5. web自动化之Select标签操作

    from selenium import webdriver from selenium.webdriver.support.wait import WebDriverWait from seleni ...

  6. JS实现列表移动(通过DOM操作select标签)

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现 select 标签的移动 实现代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. select标签操作

    //遍历select标签 WebElement select = driver.findElement(By.tagName("select")); List<WebElem ...

  8. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  9. 关于js中select的简单操作,以及js前台计算,span简单操作

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 【支付专区】之解析微信支付返回xml

    public static Map<String,Object> parseBodyXml2Map(String xml){ Map<String,Object> map = ...

  2. code block自动生成makefile

    安装插件 http://developer.berlios.de/projects/cbmakegen/  然后会在project菜单下面有一个Generate Makefile的选项 点击就行了 如 ...

  3. 查看app日志的方法

    可以打开SDk里面的 ddms.bat 查看日志 路径: android-sdk-macosx/tools/ddms SDK下载的地址: http://www.androiddevtools.cn/ ...

  4. hadoop MapReduce —— 输出每个单词所对应的文件

    下面是四个文件及其内容. 代码实现: Mapper: package cn.tedu.invert; import java.io.IOException; import org.apache.had ...

  5. Aysnc的异步执行的线程池

    ProxyAsyncConfiguration.java源码: @Configuration @Role(BeanDefinition.ROLE_INFRASTRUCTURE) public clas ...

  6. R语言——实验4-人工神经网络

    带包实现: rm(list=ls()) setwd("C:/Users/Administrator/Desktop/R语言与数据挖掘作业/实验4-人工神经网络") Data=rea ...

  7. kafka 生产消费原理详解

    Kafka日志及Topic数据清理 https://blog.csdn.net/qiaqia609/article/details/78899298 Kafka--Consumer消费者 pastin ...

  8. 笔记函数 - Ring0 Sleep()

    #define DELAY_ONE_MICROSECOND (-10) #define DELAY_ONE_MILLISEND (DELAY_ONE_MICROSECOND*1000) void Sl ...

  9. C语言强化——学生管理系统

    系统模块设计 a.预处理模块 系统在启动时会根据配置文件里的内容去相应文件里去加载账户信息和学生信息. b.登陆模块 输入用户名和密码,输密码的时候用"*" 代表用户当前输入的内容 ...

  10. Access、SQLServer、Oracle常见SQL语句应用区别

    Access.SQLServer.Oracle常见SQL语句应用区别 关劲松 PMP 如果要兼容Access.SQL Server.Oracle三个数据库版本:我们在编写SQL语句的过程中,尽量使用一 ...