◆◆0

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

重蔚 2018年4月2日 JavaScript自学教程 1,158 0

下拉框操作

实现效果如下：

完整源码如下：

<!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>