给你个例子:
<html>
<head>
<script language="javascript">
<!--
function LinkedDropList(oSelA,oSelB){
var dropList1 = oSelA
var dropList2 = oSelB
var autoRemove = true
var ignoreRepeat = false
//+-------------------------------------------------
this.setAutoRemove=function(bStatus){
autoRemove = ("boolean" == typeof(bStatus) ? bStatus : false)
}
//+--------------------------------------------------
this.setIgnoreRepeat=function(bStatus){
ignoreRepeat = ("boolean" == typeof(bStatus) ? bStatus : false)
}
//+--------------------------------------------------
this.move=function(sDirection,nIndex){
if(sDirection=='forward'){
moveForward(nIndex)
}
else{
moveBack(nIndex)
}
}
this.moveAll=function(sDirection){
var oSrc,nTotal
if(sDirection=='forward'){
nTotal=dropList1.length
}
else{
nTotal=dropList2.length
}
for(var i = 0;i < nTotal;i ++){
if (!autoRemove){
this.move(sDirection,i)
}
else{
this.move(sDirection,0)
}
}
}
//+-------------------------------------------------
function moveBack(nIndex){
move(dropList2,dropList1,nIndex)
}
//+-------------------------------------------------
function moveForward(nIndex){
move(dropList1,dropList2,nIndex)
}
//+--------------------------------------------------
function move(oSrc,oTagert,nIndex){
var oCurOption
if(typeof(nIndex)=="undefined"){
if (-1 == oSrc.selectedIndex)
return
oCurOption=oSrc.options[oSrc.selectedIndex]
}
else{
oCurOption=oSrc.options[nIndex]
}
//check if it has added
if (!ignoreRepeat){
for(var i=0;i<oTagert.length;i++){
if(oCurOption.value == oTagert.options[i].value){
alert(oTagert.options[i].value)
oTagert.options[i].selected=true
return
}
}
}
//move element
oTagert.appendChild(oCurOption.cloneNode(true))
if(autoRemove){
oSrc.removeChild(oCurOption)
}
}
dropList1.ondblclick = moveForward
dropList2.ondblclick = moveBack
}var ld
function window.onload(){
ld = new LinkedDropList(selA,selB)}
//-->
</script>
<title></title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<select id="selA" size="5" style ="width:150">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select id="selB" NAME="Select1" style ="width:150" size="5">
</select>
<br>
<input type="button" value=">" onclick="ld.move('forward')">
<input type="button" value="<" onclick="ld.move('back')">
<input type="button" value=">>" onclick="ld.moveAll('forward')">
<input type="button" value="<<" onclick="ld.moveAll('back')">
<input type="checkbox" onclick="ld.setIgnoreRepeat(this.checked)">忽略重复值
<input type="checkbox" checked onclick="ld.setAutoRemove(this.checked)">自动删除原选项
</body>
</html>
<html>
<head>
<script language="javascript">
<!--
function LinkedDropList(oSelA,oSelB){
var dropList1 = oSelA
var dropList2 = oSelB
var autoRemove = true
var ignoreRepeat = false
//+-------------------------------------------------
this.setAutoRemove=function(bStatus){
autoRemove = ("boolean" == typeof(bStatus) ? bStatus : false)
}
//+--------------------------------------------------
this.setIgnoreRepeat=function(bStatus){
ignoreRepeat = ("boolean" == typeof(bStatus) ? bStatus : false)
}
//+--------------------------------------------------
this.move=function(sDirection,nIndex){
if(sDirection=='forward'){
moveForward(nIndex)
}
else{
moveBack(nIndex)
}
}
this.moveAll=function(sDirection){
var oSrc,nTotal
if(sDirection=='forward'){
nTotal=dropList1.length
}
else{
nTotal=dropList2.length
}
for(var i = 0;i < nTotal;i ++){
if (!autoRemove){
this.move(sDirection,i)
}
else{
this.move(sDirection,0)
}
}
}
//+-------------------------------------------------
function moveBack(nIndex){
move(dropList2,dropList1,nIndex)
}
//+-------------------------------------------------
function moveForward(nIndex){
move(dropList1,dropList2,nIndex)
}
//+--------------------------------------------------
function move(oSrc,oTagert,nIndex){
var oCurOption
if(typeof(nIndex)=="undefined"){
if (-1 == oSrc.selectedIndex)
return
oCurOption=oSrc.options[oSrc.selectedIndex]
}
else{
oCurOption=oSrc.options[nIndex]
}
//check if it has added
if (!ignoreRepeat){
for(var i=0;i<oTagert.length;i++){
if(oCurOption.value == oTagert.options[i].value){
alert(oTagert.options[i].value)
oTagert.options[i].selected=true
return
}
}
}
//move element
oTagert.appendChild(oCurOption.cloneNode(true))
if(autoRemove){
oSrc.removeChild(oCurOption)
}
}
dropList1.ondblclick = moveForward
dropList2.ondblclick = moveBack
}var ld
function window.onload(){
ld = new LinkedDropList(selA,selB)}
//-->
</script>
<title></title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<select id="selA" size="5" style ="width:150">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select id="selB" NAME="Select1" style ="width:150" size="5">
</select>
<br>
<input type="button" value=">" onclick="ld.move('forward')">
<input type="button" value="<" onclick="ld.move('back')">
<input type="button" value=">>" onclick="ld.moveAll('forward')">
<input type="button" value="<<" onclick="ld.moveAll('back')">
<input type="checkbox" onclick="ld.setIgnoreRepeat(this.checked)">忽略重复值
<input type="checkbox" checked onclick="ld.setAutoRemove(this.checked)">自动删除原选项
</body>
</html>
event.srcElement.value