Loading
0

javascript实现下拉框与复选框操作教程

下拉框操作

实现效果如下:

完整源码如下:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<select name="scolor" id="scolor">
<option value="0">==请选择==</option>
<option value="red">==红色==</option>
<option value="green">==绿色==</option>
<option value="blue">==蓝色==</option>
</select>
<br />
<input type="button" value="添加一个选择" onclick="Test1();" />
<input type="button" value="获取选中项的索引" onclick="Test2();" />
<input type="button" value="获取选中项的文本" onclick="Test3();" />
<input type="button" value="获取选中项的值" onclick="Test4();" />
<input type="button" value="删除选中项" onclick="Test5();" />
<input type="button" value="让指定的项被选中" onclick="Test6();" />
<input type="button" value="修改选中项" onclick="Test7();" />
<input type="button" value="清空项" onclick="Test8();" />
</body>
<script language="javascript" type="text/javascript">
function Test1(){
var scolor=document.getElementById("scolor");
scolor.options.add(new Option("黄色"));//选项的文本和值是一样
//第二种方式
scolor.options.add(new Option("橙色","orange"));//添加指定文本和值的选项
//作业:再添加一个选项,要求是第2个选项,第二个选项变为最后一个
}
 
function Test2(){
var scolor=document.getElementById("scolor");
alert(scolor.selectedIndex);
}
 
function Test3(){
var scolor=document.getElementById("scolor");
alert(scolor.options[scolor.selectedIndex].text);
}
 
function Test4(){
var scolor=document.getElementById("scolor");
//alert(scolor.options[scolor.selectedIndex].value);
alert(scolor.value);
}
 
function Test5(){
var scolor=document.getElementById("scolor");
scolor.options.remove(scolor.selectedIndex);
}
 
function Test6(){
var scolor=document.getElementById("scolor");
//scolor.selectedIndex=2;//控制索引
scolor.value="green";//控制值
}
 
function Test7(){
var scolor=document.getElementById("scolor");
scolor.options[scolor.selectedIndex]=new Option("羞羞色","yellowyellow");
}
 
function Test8(){
var scolor=document.getElementById("scolor");
/*
for(var i=0;i<scolor.options.length;i++){
      scolor.options.remove(i);
      }
remove只能删除一次,无法删除多个,使用循环也不行,原因是从0索引开始删除,没删除一个索引会产生变化,那么倒序从后往前删除即可。这里再提供一个简单的办法
*/
scolor.options.length=0;
}
</script>
</html>

以上就是通过js实现下拉框与复选框的操作方法

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:admin@cwhello.com