js进阶 9-11 select选项框如何动态添加和删除元素
一、总结
一句话总结：
二、js进阶 9-11 select选项框如何动态添加和删除元素
1、案例说明
2、相关知识 Select 下拉列表
Select 对象集合
options[]返回包含下拉列表中的所有选项的一个数组Select对象属性
length返回下拉列表中的选项数目multiple 设置或返回是否选择多个项目。selectedIndex 设置或返回下拉列表中被选项目的索引号。size 设置或返回下拉列表中的可见行数。id/name/disabled/form/tabIndexSelect 对象方法
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 </head> 7 <body> 8<form name="form1" action=""> 9 <select name="sel" size="3" onchange="addopt()">10 <option value="1">选项1</option>11 <option value="2">选项2</option>12 <option value="3">选项3</option>13 </select><br>14 <!-- <input type="button" value="测试按钮" οnclick="addopt()"> -->15</form>16 <script>17function addopt(){18 var obj=document.form1.sel19 //添加一个选项20 //var op=new Option("文本","值")21 //obj.add(new Option("文本","值"))22 //删除所有选项option23 //obj.options.length=0;24 //删除当前选中选项25 var index=obj.selectedIndex; 26 obj.remove(index);27}28 </script>29 </body>30 </html>
