js进阶 9-11 select选项框如何动态添加和删除元素
一、总结
一句话总结：
二、js进阶 9-11 select选项框如何动态添加和删除元素
1、案例说明
2、相关知识 Select 下拉列表
Select 对象集合
- options[]返回包含下拉列表中的所有选项的一个数组
Select对象属性
- length返回下拉列表中的选项数目
- multiple 设置或返回是否选择多个项目。
- selectedIndex 设置或返回下拉列表中被选项目的索引号。
- size 设置或返回下拉列表中的可见行数。
- id/name/disabled/form/tabIndex
Select 对象方法
- add() 向下拉列表添加一个选项。
语法：selectobject.add(option,before)
- remove() 从下拉列表中删除一个选项.
语法: selectobject.remove(index)
- blur()/focus()
Option 对象的属性
- defaultSelected 返回 selected属性的默认值。
- index 返回下拉列表中某个选项的索引位置。
- Selected 设置或返回 selected 属性的值。
- text 设置或返回某个选项的纯文本值。
- disabled/form/id/value......
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<form name="form1" action="">
<select name="sel" size="3" onchange="addopt()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select><br>
<!-- <input type="button" value="测试按钮" onclick="addopt()"> -->
</form>
<script>
function addopt(){
var obj=document.form1.sel
//添加一个选项
//var op=new Option("文本","值")
//obj.add(new Option("文本","值"))
//删除所有选项option
//obj.options.length=0;
//删除当前选中选项
var index=obj.selectedIndex;
obj.remove(index);
}
</script>
</body>
</html>
js进阶 9-11 select选项框如何动态添加和删除元素的更多相关文章
-
JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
-
原生JS动态添加和删除类
原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...
-
js动态添加和删除标签
html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...
-
JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
-
js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
-
使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
-
使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
-
JS应用实例5：全选、动态添加
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
-
linux进阶之远程免密登录，动态添加磁盘及个别基础命令
一. 免密登录(远程连接ssh) ssh IP #连接登录到其它机 ssh 192.168.10.102 ssh IP "CMD" #在其它机器上执行命令 yum -y i ...
随机推荐
-
vuejs
简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易 ...
-
CodeForces 689D	Friends and Subsequences （RMQ+二分）
Friends and Subsequences 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/H Description Mi ...
-
ubuntu zendDebugger.so 加载不上的问题
参考文章 http://blog.sina.com.cn/s/blog_6612d5810101dapf.html 装zenDdebugger是为了在eclipse中调试用!!!!!!!结果搞了半 ...
-
manjaro备忘录
updated 2018/4/3 manjaro 使用Linux发行版时需要注意几个方面的问题: 包管理器 包管理器无疑时各家发行版的最大特色之一.软件同时也是一个平台是否能够产生足够的吸引力的来源之 ...
-
hexo+github page +markdown问题汇总
1.没有权限提交 解决办法:把git版本由2.x改为1.9 未完待续
-
Flutter（一）安装配置和几个注意点
Flutter(一)安装配置和几个注意点 记住要仰望星空,不要低头看脚下.无论生活如何艰难,请保持一颗好奇心.你总会找到自己的路和属于你的成功. 愿您的来世灵魂依旧,躯体康健. 一句话来形容Flutt ...
-
EF6 学习笔记（三）：排序、过滤查询及分页
EF6 学习笔记索引目录页: ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上篇:EF6 学习笔记(二):操练 CRUD 增删改查 本篇原文地址:Sorting, Filterin ...
-
HDU4738 Caocao&#39;s Bridges【强连通】
题意: 曹操有N个岛,这些岛用M座桥连接起来,每座桥有士兵把守(也可能没有),周瑜想让这N个岛不连通,但只能炸掉一座桥,并且炸掉一座桥需要派出不小于守桥士兵数的人去,桥的守兵数为0时,也需要派出一个人 ...
-
SQLite3日期与时间，常见函数
SQLite3日期与时间,常见函数 import sqlite3 #con = sqlite3.connect('example.db') con = sqlite3.connect(":m ...
-
MemCached缓存操作
Web项目在运行时,通常需要从数据库中进行读写.随着操作数据量的增大,以及访问量的集中,数据库的负载增加,数据库响应变慢,网站访问速度变慢的情况.Memcached就是用来解决这些问题的. Memca ...