一、下拉框操作
实现效果如下：
完整源码：
<!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>
作业：
1、添加一个选项，要求是第2个选项，第2个选项变为最后一个
<select name="s1" id="s1">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input type="button" value="click" onclick="Test()" />
<script language="javascript" type="text/javascript">
function Test(){
var s1=document.getElementById("s1");
var o2=s1.options[1];
s1.options[1]=new Option("d");
s1.options.add(o2);
}
</script>
移位下拉框实现效果如下：
完整源码：
<!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>
<style>
.div1{
width:110px;
height:200px;
float:left;
text-align:center;
line-height:190px;
}
.s1{
width:100px;
height:200px;
}
</style>
</head>
<body>
<div class="div1">
<select class="s1" multiple name="ss1" id="ss1">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="orange">橙色</option>
</select>
</div>
<div class="div1">
<input type="button" value="获取选中项索引" style="margin-top:60px;" onclick="GetSelectedIndex();"><br />
<input type="button" value=" >> " onclick="LeftToRight();" /><br />
<input type="button" onclick="RightToLeft();" value=" << " />
</div>
<div class="div1">
<select class="s1" multiple name="ss2" id="ss2">
</select>
</div>
</body>
<script language="javascript" type="text/javascript">
//获取选中项索引
function GetSelectedIndex(){
var s1=document.getElementById("ss1");
var arr=new Array();
for(var i=0;i<s1.options.length;i++){
if(s1.options[i].selected)
//arr[]=i;//js动态数组不支持这种写法
arr.push(i);
}
alert(arr.length);
}
//从左往右移
function LeftToRight(){
var ss1=document.getElementById("ss1");
var ss2=document.getElementById("ss2");
var arr=new Array();//需要删除的项索引
var arrop=new Array();//需要移动的项
for(var i=0;i<ss1.options.length;i++){
if(ss1.options[i].selected){
arrop.push(ss1.options[i]);
arr.push(i);
}
}
//删除左边项
for(var i=ss1.options.length-1;i>=0;i--){
for(var j=arr.length-1;j>=0;j--){
if(arr[j]==i)
ss1.options.remove(arr[j]);
}
}
//添加右边选项
for(var i=0;i<arrop.length;i++){
ss2.options.add(arrop[i]);
}
}
//从右往左移
function RightToLeft(){
var ss1=document.getElementById("ss1");
var ss2=document.getElementById("ss2");
var arr=new Array();//需要删除的项索引
var arrop=new Array();//需要移动的项
for(var i=0;i<ss2.options.length;i++){
if(ss2.options[i].selected){
arrop.push(ss2.options[i]);
arr.push(i);
}
}
//删除右边项
for(var i=ss2.options.length-1;i>=0;i--){
for(var j=arr.length-1;j>=0;j--){
if(arr[j]==i)
ss2.options.remove(arr[j]);
}
}
//添加左边选项
for(var i=0;i<arrop.length;i++){
ss1.options.add(arrop[i]);
}
}
</script>
</html>
二、复选框操作
获取同名元素，返回该元素的数组
document.getElementsByName(“name”);
实现效果如下
示例源码：
<!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>
<input type="checkbox" name="cboall" id="cboall" onclick="SelectAll(this)" />全选/全不选
<input type="button" value="反向选择" onclick="OrientSelect()" />
<input type="button" value="获取选中复选框的值" onclick="GetSelectedCheckBoxValues()" />
<br />
<input type="checkbox" onclick="SelectOrient();" value="cbo1" name="cbo[]" id="cbo[]" />1
<input type="checkbox" onclick="SelectOrient();" value="cbo2" name="cbo[]" id="cbo[]" />2
<input type="checkbox" onclick="SelectOrient();" value="cbo3" name="cbo[]" id="cbo[]" />3
<input type="checkbox" onclick="SelectOrient();" value="cbo4" name="cbo[]" id="cbo[]" />4
</body>
<script language="javascript" type="text/javascript">
//全选
function SelectAll(obj){
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
cboes[i].checked=obj.checked;
}
}
//反选
function SelectOrient(){
var cboall=document.getElementById("cboall");
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
if(cboes[i].checked){
cboall.checked=true;
return;
}
}
cboall.checked=false;
}
//反向选择
function OrientSelect(){
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
cboes[i].checked=!cboes[i].checked;
}
}
//获取选中复选框的值
function GetSelectedCheckBoxValues(){
var cbovalues="";
var cboes=document.getElementsByName("cbo[]");
for(var i=0;i<cboes.length;i++){
if(cboes[i].checked)
cbovalues+=cboes[i].value+",";
}
if(cbovalues=="")
alert("请至少选择一个子复选框");
else{
//去掉最后一个逗号
cbovalues=cbovalues.substr(0,cbovalues.length-1);
alert(cbovalues);
}
}
</script>
</html>