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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <style type="text/css">
 7     select{
 8             width: 150px;
 9             background: #ccc;
10         }
11         textarea{
12             width: 150px;
13         }
14     </style>
15 </head>
16 <body>
17     <form name="form1" action="">
18         <select name="sel" size="5" multiple onchange=" mySelect()">
19             <option value="1">选项1</option>
20             <option value="2">选项2</option>
21             <option value="3">选项3</option>
22             <option value="4">选项4</option>
23             <option value="5">选项5</option>
24         </select><br>
25         <textarea name="show" rows="5"></textarea>
26     </form>
27     <script type="text/javascript">
28         function mySelect(){
29             var len=document.form1.sel.options.length
30             var str=''
31             // var len2=document.form1.sel.length
32             // alert(document.form1.sel.options[0].text)
33             // alert(len2)
34             for(var i=0;i<len;i++){
35                 if (document.form1.sel.options[i].selected) {
36                     str+=document.form1.sel.options[i].text+'
'
37                 }
38             }
39             // alert(str)
40             document.form1.show.value=str
41         }
42         // mySelect()
43     </script>
44 </body>
45 </html>