js进阶 9-10 html中如何遍历下拉列表
2024-08-31 15:33:21
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>
最新文章
- web前端网站收藏
- ArrayList Vector LinkedList 区别与用法
- 关于window.showModalDialog的一些配置
- High Performance Animations
- PHP - 设置地址栏小图标
- Android SQLite总结[转载]
- 如何使用python将MySQL中的查询结果导出为Excel----xlwt的使用
- eclipse中运行出错:无法初始化主类的解决办法
- bugku 逆向 love
- git format-patch制作内核补丁
- html5(一)
- arcgis pro行列转换
- Python基础之初始编码
- pa sslvpn配置
- Android开发真机测试方法 (转)
- 深度学习Momentum(动量方法)
- 2-14-1 MySQL基础语句,查询语句
- centos7.3下apache搭建django[未成功]
- C#(winform)设置窗体的启动位置
- 词向量( Distributed Representation)工作原理是什么