js进阶 9-11 select选项框如何动态添加和删除元素
一、总结
一句话总结：
二、js进阶 9-11 select选项框如何动态添加和删除元素
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>
</head>
<body>
<form name="form1" action="">
<select name="sel" size="3" onchange="addopt()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select><br>
<!-- <input type="button" value="测试按钮" onclick="addopt()"> -->
</form>
<script>
function addopt(){
var obj=document.form1.sel
//添加一个选项
//var op=new Option("文本","值")
//obj.add(new Option("文本","值"))
//删除所有选项option
//obj.options.length=0;
//删除当前选中选项
var index=obj.selectedIndex;
obj.remove(index);
}
</script>
</body>
</html>