一、下拉框操作
实现效果如下：
完整源码：
<!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();" />
完整源码：
<!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>
,
