<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>multiple select</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
input{margin:5px;width:30px;}
</style>
</HEAD>
<BODY>
<div id="container" name="container" style="width:300px;text-align:center;">
<div id="left_select" name="left_select" style="float:left;">
<form id="left_form" name="left_form">
<select id="l_select" name="l_select" multiple size=10 style="width:100px;height:200px;">
<option value="hunan">湖南</option>
<option value="hubei">湖北</option>
<option value="guangdong">广东</option>
<option value="guangxi">广西</option>
<option value="henan">河南</option>
<option value="hebei">河北</option>
</select>
</form>
</div>
<div id="right_select" name="right_select" style="float:right;width:180px;">
<span id="button" name="button" style="width:50px;float:left;text-align:left;line-height:30px;margin-left:15px;">
<form >
<input type="button" value=">" οnclick="sigle_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
<input type="button" value=">>" οnclick="mul_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
<input type="button" value="<" οnclick="sigle_remove(document.forms[2].r_select,document.forms[0].l_select)"/><br>
<input type="button" value="<<" οnclick="mul_remove(document.forms[2].r_select,document.forms[0].l_select)"/><br>
<input type="button" value=">>>" οnclick="all_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
<input type="button" value="<<<" οnclick="all_remove(document.forms[2].r_select,document.forms[0].l_select)"/>
</form>
</span>
<form id="right_form" name="right_form" style="float:right;">
<select id="r_select" name="r_select" multiple size=10 style="width:100px;height:200px;">
</select>
</form>
</div>
</div>
<script type="text/javascript">
var right = document.forms[2].r_select.options.length=0;
//单个移动
function sigle_remove(from,to){
var index = from.selectedIndex;
if( index==-1 ){
alert("请选择一项");
}else{
var value = from.options[index].value;
var text = from.options[index].text;
to.options[(to.length)] = new Option(text,value);
from.options[index]=null;
}
}
//多个移动
function mul_remove(from,to){
var text ;
var value ;
var length = from.length;
var tempArray = new Array();
if( from.selectedIndex==-1 ){
alert("至少选择一项");
}else{
for( var i = 0 ; i<length;i++){
if(from.options[i].selected){
value = from.options[i].value;
text = from.options[i].text;
to.options[to.length] = new Option(text,value);
}else{
value = from.options[i].value;
text = from.options[i].text;
tempArray[tempArray.length]= new Option(text,value);
}
}
from.options.length=0;
for(var j = 0 ; j<tempArray.length;j++ ){
from.options[from.options.length] = tempArray[j];
}
}
}
//全部移动
function all_remove(from,to){
var index = from.selectedIndex;
var value ;
var length = from.length;
//alert(length);
var text ;
for( var i = 0 ; i< length;i++){
value = from.options[i].value;
text = from.options[i].text;
to.options[to.length] = new Option(text,value);
}
for( var i = length-1 ; i>=0;i--){
from.options[i]=null;
}
}
</script>
</BODY>
</HTML>
业务管理系统常用的List
最新推荐文章于 2024-05-27 19:21:01 发布