js进阶 9-10 html中如何遍历下拉列表
js进阶 9-10 html中单选框和多选框如何遍历下拉列表
一、总结
一句话总结:
1、select元素的options.length可以获取选择长度,然后用options[i]精确定位到选项,用选项元素的selected属性判断选项是否选中,选项的text属性获取选项内容。
2、textarea的value属性获取teaxtarea里面的值
二、js进阶 9-10 html中如何遍历下拉列表
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>
<style type="text/css">
select{
width: 150px;
background: #ccc;
}
textarea{
width: 150px;
}
</style>
</head>
<body>
<form name="form1" action="">
<select name="sel" size="5" multiple onchange=" mySelect()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select><br>
<textarea name="show" rows="5"></textarea>
</form>
<script type="text/javascript">
function mySelect(){
var len=document.form1.sel.options.length
var str=''
// var len2=document.form1.sel.length
// alert(document.form1.sel.options[0].text)
// alert(len2)
for(var i=0;i<len;i++){
if (document.form1.sel.options[i].selected) {
str+=document.form1.sel.options[i].text+'\n'
}
}
// alert(str)
document.form1.show.value=str
}
// mySelect()
</script>
</body>
</html>
js进阶 9-10 html中如何遍历下拉列表的更多相关文章
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^)
js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^) 一.总结 原样匹配的字符在正则中原样输出:var reg4=/第[1-2][0-9]章/g //10-29 取反^:var ...
- js进阶 11-14 jquery如何实现元素的替换和遍历
js进阶 11-14 jquery如何实现元素的替换和遍历 一.总结 一句话总结:替换:replaceAll() 与 replaceWith().遍历:each(). 1.replaceAll() ...
- js 进阶 10 js选择器大全
js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...
- 10.26最后的模拟DAY2 改造二叉树[中序遍历+严格递增的最长不下降子序列]
改造二叉树 [题目描述] 小Y在学树论时看到了有关二叉树的介绍:在计算机科学中,二叉树是每个结点最多有两个子结点的有序树.通常子结点被称作“左孩子”和“右孩子”.二叉树被用作二叉搜索树和二叉堆.随后他 ...
- js实现随机选取[10,100)中的10个整数,存入一个数组,并排序。 另考虑(10,100]和[10,100]两种情况。
1.js实现随机选取[10,100)中的10个整数,存入一个数组,并排序. <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- 13.constexpr
#include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...
- web service 原理
Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...
- Python 极简教程(八)字符串 str
由于字符串过于重要,请认真看完并保证所有代码都至少敲过一遍. 对于字符串,前面在数据类型中已经提到过.但是由于字符串类型太过于常用,Python 中提供了非常多的关于字符串的操作.而我们在实际编码过程 ...
- 【Educational Codeforces Round 33 D】Credit Card
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次遇到0的时候,看看当前累计的delta是多少. 如果大于0,则temp = d-delta; 小于0,取temp2 = min( ...
- ajax对服务端发送请求
//兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else req = ...
- express 的路由分离
在做大型项目是一般不会把路由写入server.js里,所以就有了路由分离 1.在项目目录下创建router文件夹 user.js var express = require("express ...
- Android 调用系统邮件,发送邮件到指定邮箱
在项目中,最后有一个联络我们,要求是点击号码还有邮箱地址能够发送邮件,这时候解决的方案其实有两种,一种是调用系统发邮件的软件,可以添加邮箱账号就可以发送邮件:第二种是使用javamail来发送邮件.在 ...
- C语言深度剖析-----函数
认清函数的真面目 函数的意义 面向过程的程序设计 函数声明和定义 函数参数 编写代码的时候,不要编写类似先后调用的代码 f(k,k++) C语言中的顺序点 a--&&a ,& ...
- finish() OnDestroy() system.exit()
1 finish()方法:activity动作完成的时候, 或者Activity需要关闭的时候, 调用此方法. 2 当你调用此方法的时候,系统只是将最上面的Activity移出了栈,并没有及时的调用o ...
- HDU 1408 盐水的故事 数学水题
http://acm.hdu.edu.cn/showproblem.php?pid=1408 题目: 挂盐水的时候,如果滴起来有规律,先是滴一滴,停一下:然后滴二滴,停一下:再滴三滴,停一下...,现 ...