4 下拉列表
繁琐写法
<html>
<head>
<title>下拉列表练习</title>
<meta charset="gbk"/>
<style type="text/css">
div{
border:1px solid;
padding:10px;
}
#div0{
margin:50px auto;
width:1600px;
height:700px;
}
#div1left,#div1right{
width:300px;
height:200px;
margin-top:50px;
}
#div1left{
margin-left:300px;
float:left;
}
#div1right{
float:right;
margin-right:300px;
}
#div2{
clear:both;
width:1200px;
height:350px;
margin:100px auto;
}
#div2 div{
width:150px;
height:300px;
float:left;
margin:20px 110px;
}
select{
font-size:24px;
font-weight:bold;
color:blue;
}
#div2middle input{
width:140px;
height:50px;
margin:11px auto;
background-image:url("button.png");
}
#but_to_right{
background-position:33% 3%;
}
#but_all_to_right{
background-position:33% 28%;
}
#but_to_left{
background-position:35% 55%;
}
#but_all_to_left{
background-position:35% 86%;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1left">
</div>
<div id="div1right">
</div>
<div id="div2">
<div id="div2left">
<select id="sel_left" size="8" multiple="true">
<option>选项0011</option>
<option>选项0012</option>
<option>选项0013</option>
<option>选项0014</option>
<option>选项0015</option>
<option>选项0016</option>
<option>选项0017</option>
<option>选项0018</option>
</select>
</div>
<div id="div2middle">
<input type="button" id="but_to_right"/>
<input type="button" id="but_all_to_right"/>
<input type="button" id="but_to_left"/>
<input type="button" id="but_all_to_left"/>
</div>
<div id="div2right">
<select id="sel_right" size="8" multiple="true">
</select>
</div>
</div>
</div>
<script type="text/javascript">
var oselLeft,oselRight;
window.onload=function(){
oselLeft=document.getElementById("sel_left");
oselRight=document.getElementById("sel_right");
setText();
document.getElementById("but_to_right").onclick=function(){
var collLeft=oselLeft.getElementsByTagName("option");
for(var i=0;i<collLeft.length;i++){
if(collLeft[i].selected){
collLeft[i].selected=false;
oselRight.appendChild(collLeft[i]);
i--;
}
}
setText();
}
document.getElementById("but_to_left").onclick=function(){
var collRight=oselRight.getElementsByTagName("option");
for(var i=0;i<collRight.length;i++){
if(collRight[i].selected){
collRight[i].selected=false;
oselLeft.appendChild(collRight[i]);
i--;
}
}
setText();
}
document.getElementById("but_all_to_right").onclick=function(){
var collLeft=oselLeft.getElementsByTagName("option");
for(var i=0;i<collLeft.length;i++){
collLeft[i].selected=false;
oselRight.appendChild(collLeft[i]);
i--;
}
setText();
}
document.getElementById("but_all_to_left").onclick=function(){
var collRight=oselRight.getElementsByTagName("option");
for(var i=0;i<collRight.length;i++){
collRight[i].selected=false;
oselLeft.appendChild(collRight[i]);
i--;
}
setText();
}
}
function setText(){
var collLeft=oselLeft.getElementsByTagName("option");
var collRight=oselRight.getElementsByTagName("option");
var stextLeft="",stextRight="";
for(var i=0;i<collLeft.length;i++){
stextLeft+=collLeft[i].innerText+" ";
}
for(var i=0;i<collRight.length;i++){
stextRight+=collRight[i].innerText+" ";
}
document.getElementById("div1left").innerHTML=stextLeft.bold().fontcolor("red");
document.getElementById("div1right").innerHTML=stextRight.bold().fontcolor("blue");
}
</script>
</body>
</html>
简便写法
<html>
<head>
<title>下拉列表练习2</title>
<meta charset="gbk"/>
<style type="text/css">
div{
border:1px solid;
padding:10px;
}
#div0{
margin:50px auto;
width:1600px;
height:700px;
}
#div1left,#div1right{
width:300px;
height:200px;
margin-top:50px;
}
#div1left{
margin-left:300px;
float:left;
}
#div1right{
float:right;
margin-right:300px;
}
#div2{
clear:both;
width:1200px;
height:350px;
margin:100px auto;
}
#div2 div{
width:150px;
height:300px;
float:left;
margin:20px 110px;
}
select{
font-size:24px;
font-weight:bold;
color:blue;
}
#div2middle input{
width:140px;
height:50px;
margin:11px auto;
background-image:url("button.png");
}
#but_to_right{
background-position:33% 3%;
}
#but_all_to_right{
background-position:33% 28%;
}
#but_to_left{
background-position:35% 55%;
}
#but_all_to_left{
background-position:35% 86%;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1left">
</div>
<div id="div1right">
</div>
<div id="div2">
<div id="div2left">
<select id="sel_left" size="8" multiple="true">
<option>选项0011</option>
<option>选项0012</option>
<option>选项0013</option>
<option>选项0014</option>
<option>选项0015</option>
<option>选项0016</option>
<option>选项0017</option>
<option>选项0018</option>
</select>
</div>
<div id="div2middle">
<input type="button" id="but_to_right"/>
<input type="button" id="but_all_to_right"/>
<input type="button" id="but_to_left"/>
<input type="button" id="but_all_to_left"/>
</div>
<div id="div2right">
<select id="sel_right" size="8" multiple="true">
</select>
</div>
</div>
</div>
<script type="text/javascript">
var oselLeft,oselRight;
window.onload=function(){
oselLeft=document.getElementById("sel_left");
oselRight=document.getElementById("sel_right");
setText();
document.getElementById("but_to_right").onclick=function(){
change(oselLeft,oselRight,false);
}
document.getElementById("but_to_left").onclick=function(){
change(oselRight,oselLeft,false);
}
document.getElementById("but_all_to_right").onclick=function(){
change(oselLeft,oselRight,true);
}
document.getElementById("but_all_to_left").onclick=function(){
change(oselRight,oselLeft,true);
}
}
function setText(){
var collLeft=oselLeft.getElementsByTagName("option");
var collRight=oselRight.getElementsByTagName("option");
var stextLeft="",stextRight="";
for(var i=0;i<collLeft.length;i++){
stextLeft+=collLeft[i].innerText+" ";
}
for(var i=0;i<collRight.length;i++){
stextRight+=collRight[i].innerText+" ";
}
document.getElementById("div1left").innerHTML=stextLeft.bold().fontcolor("red");
document.getElementById("div1right").innerHTML=stextRight.bold().fontcolor("blue");
}
function change(oselFrom,oselTo,b){
var collOption=oselFrom.getElementsByTagName("option");
for(var i=0;i<collOption.length;i++){
if(b||collOption[i].selected){
collOption[i].selected=false;
oselTo.appendChild(collOption[i]);
i--;
}
}
setText();
}
</script>
</body>
</html>