js进阶 9-11 select选项框如何动态添加和删除元素
生活随笔
收集整理的這篇文章主要介紹了
js进阶 9-11 select选项框如何动态添加和删除元素
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
js進(jìn)階 9-11 select選項(xiàng)框如何動(dòng)態(tài)添加和刪除元素
一、總結(jié)
一句話總結(jié)：
?
?
二、js進(jìn)階 9-11 select選項(xiàng)框如何動(dòng)態(tài)添加和刪除元素
1、案例說明
?
?
2、相關(guān)知識(shí) Select 下拉列表
Select 對(duì)象集合
- options[]返回包含下拉列表中的所有選項(xiàng)的一個(gè)數(shù)組
Select對(duì)象屬性
- length返回下拉列表中的選項(xiàng)數(shù)目
- multiple 設(shè)置或返回是否選擇多個(gè)項(xiàng)目。
- selectedIndex 設(shè)置或返回下拉列表中被選項(xiàng)目的索引號(hào)。
- size 設(shè)置或返回下拉列表中的可見行數(shù)。
- id/name/disabled/form/tabIndex
Select 對(duì)象方法
- add() 向下拉列表添加一個(gè)選項(xiàng)。
語法：selectobject.add(option,before)
- remove() 從下拉列表中刪除一個(gè)選項(xiàng).
語法: selectobject.remove(index)
- blur()/focus()
Option 對(duì)象的屬性
- defaultSelected 返回 selected屬性的默認(rèn)值。
- index 返回下拉列表中某個(gè)選項(xiàng)的索引位置。
- Selected 設(shè)置或返回 selected 屬性的值。
- text 設(shè)置或返回某個(gè)選項(xiàng)的純文本值。
- disabled/form/id/value......
?
3、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文檔</title> 6 </head> 7 <body> 8 <form name="form1" action=""> 9 <select name="sel" size="3" onchange="addopt()"> 10 <option value="1">選項(xiàng)1</option> 11 <option value="2">選項(xiàng)2</option> 12 <option value="3">選項(xiàng)3</option> 13 </select><br> 14 <!-- <input type="button" value="測試按鈕" οnclick="addopt()"> --> 15 </form> 16 <script> 17 function addopt(){ 18 var obj=document.form1.sel 19 //添加一個(gè)選項(xiàng) 20 //var op=new Option("文本","值") 21 //obj.add(new Option("文本","值")) 22 //刪除所有選項(xiàng)option 23 //obj.options.length=0; 24 //刪除當(dāng)前選中選項(xiàng) 25 var index=obj.selectedIndex; 26 obj.remove(index); 27 } 28 </script> 29 </body> 30 </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9168596.html
總結(jié)
以上是生活随笔為你收集整理的js进阶 9-11 select选项框如何动态添加和删除元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 汽车保养常识油管中有水结冰堵塞了怎么办
- 下一篇： 5分钟了解TypeScript