下拉列表左右选择的实现
<html >
<head>
<title>Htmltest</title>
</head>
<body>
<div id="div1" style="float:left;">
<div>
<select id="select1" multiple="mutiple" style="width:100px;height:100px">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
<option>DDDDD</option>
<option>EEEEE</option>
</select>
</div>
<div>
<input type="button" value="选中添加到右边->" onclick="ToRight();"/><br/>
<input type="button" value="全部添加到右边->" onclick="ToRightALL();"/>
</div>
</div>
<div id="div2">
<div>
<select id="select2" multiple="mutiple" style="width:100px;height:100px">
<option>FFFFF</option>
<option>GGGGG</option>
<option>HHHHH</option>
<option>IIIII</option>
<option>JJJJJ</option>
</select>
</div>
<div>
<input type="button" value="选中添加到左边->" onclick="ToLeft();"/><br/>
<input type="button" value="全部添加到左边->" onclick="ToLeftALL();"/>
</div>
</div>
<script type="text/javascript">
function ToRight()
{
/*步骤:
1通过document.getElementById("select1")获取select1对象
2通过节点中的通用方法 getElementsByTag获取select1对象中的标签数组对象
3遍历数组对象 通过selected来判断此标记是否被选中
4如果被选中 则吧该对象通过appendchild添加到select2标记对象中去
*/
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
var options=select1.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
if(option.selected==true)
{
select2.appendChild(option);
i--;//为什么不直接用i=0 因为第二次会直接从数组的第二个元素开始添加,会漏添加一个
}
//重置i的值因为数组长度是会改变的apendchild相当于一次剪切粘贴炒作 把i重新置为零
}
}
function ToLeft()
{
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
var options=select2.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
if(option.selected==true)
{
select1.appendChild(option);
i--;
}
//重置i的值因为数组长度是会改变的apendchild相当于一次剪切粘贴炒作 把i重新置为零
}
}
function ToRightALL()
{
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
var options=select1.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
select2.appendChild(option);
i--;//记得重置i
}
}
function ToLeftALL()
{
var select1=document.getElementById("select1");
var select2=document.getElementById("select2");
var options=select2.getElementsByTagName("option");
for(var i=0;i<options.length;i++)
{
var option=options[i];
select1.appendChild(option);
i--;//记得重置i
}
}
</script>
</body>
</html>
全选的实现
<html >
<head>
<title>Htmltest</title>
</head>
<body>
<input type="checkbox" id="box" onclick="selALLNO();"/>全选/全不选<br/>
<input type="checkbox" name="love" />篮球<br/>
<input type="checkbox" name="love"/>足球<br/>
<input type="checkbox" name="love"/>乒乓球<br/>
<input type="checkbox" name="love" />高尔夫<br/>
<input type="button" value="全选" onclick="selALL();"/>
<input type="button" value="全不选" onclick="selNO();"/>
<input type="button" value="反选" onclick="sel();"/>
<script type="text/javascript">
function selALL()
{
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++)
{
var love=loves[i];
love.checked=true;
}
}
function selNO()
{
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++)
{
var love=loves[i];
love.checked=false;
}
}
function selALLNO()
{
var box=document.getElementById("box");
if(box.checked==true)
{
selALL();
}
if(box.checked==false)
{
selNO();
}
}
function sel()
{
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++)
{
var love=loves[i];
if( love.checked==false)
{
love.checked=true;
}
else if( love.checked==true)
{
love.checked=false;
}
}
}
</script>
</body>
</html>