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+'\n' 37 } 38 } 39 // alert(str) 40 document.form1.show.value=str 41 } 42 // mySelect() 43 </script> 44 </body> 45 </html>