双击任一Select控件,查看效果:
srcAsrcBsrcCtargetAtargetBtargetC源码:
<
html
>
< head >
< script >
function removeItem(){
var sltSrc = document.getElementById( ' sltSrc ' );
var sltTarget = document.getElementById( ' sltTarget ' );
for ( var i = 0 ;i < sltSrc.options.length;i ++ )
{
var tempOption = sltSrc.options[i];
if (tempOption.selected){
sltSrc.removeChild(tempOption);
sltTarget.appendChild(tempOption);
}
}
}
function addItem(){
var sltSrc = document.getElementById( ' sltSrc ' );
var sltTarget = document.getElementById( ' sltTarget ' );
for ( var i = 0 ;i < sltTarget.options.length;i ++ )
{
var tempOption = sltTarget.options[i];
if (tempOption.selected){
sltTarget.removeChild(tempOption);
sltSrc.appendChild(tempOption);
}
}
}
function showSelectOptions(){
var sltTarget = document.getElementById( ' sltTarget ' );
var myhtml = "" ;
for ( var i = 0 ;i < sltTarget.options.length;i ++ )
{
myhtml += " Select Item " + i + " : text= " + sltTarget.options[i].text + " , value= " + sltTarget.options[i].value + " <br/> " ;
}
document.getElementById( " showInfo " ).innerHTML = myhtml;
}
</ script >
</ head >
< body >
< select ondblclick ="removeItem();" id ="sltSrc" multiple ="true" style ="height:150px;width:150px" >
< option value ="a" > srcA </ option >
< option value ="b" > srcB </ option >
< option value ="c" > srcC </ option >
</ select >
< select ondblclick ="addItem();" id ="sltTarget" multiple ="true" style ="height:150px;width:150px" >
< option value ="a" > targetA </ option >
< option value ="b" > targetB </ option >
< option value ="c" > targetC </ option >
</ select >
< div id ="showInfo" ></ div >
< input type ="button" value ="showSelectOptions" onclick ="showSelectOptions();" />
</ body >
</ html >
< head >
< script >
function removeItem(){
var sltSrc = document.getElementById( ' sltSrc ' );
var sltTarget = document.getElementById( ' sltTarget ' );
for ( var i = 0 ;i < sltSrc.options.length;i ++ )
{
var tempOption = sltSrc.options[i];
if (tempOption.selected){
sltSrc.removeChild(tempOption);
sltTarget.appendChild(tempOption);
}
}
}
function addItem(){
var sltSrc = document.getElementById( ' sltSrc ' );
var sltTarget = document.getElementById( ' sltTarget ' );
for ( var i = 0 ;i < sltTarget.options.length;i ++ )
{
var tempOption = sltTarget.options[i];
if (tempOption.selected){
sltTarget.removeChild(tempOption);
sltSrc.appendChild(tempOption);
}
}
}
function showSelectOptions(){
var sltTarget = document.getElementById( ' sltTarget ' );
var myhtml = "" ;
for ( var i = 0 ;i < sltTarget.options.length;i ++ )
{
myhtml += " Select Item " + i + " : text= " + sltTarget.options[i].text + " , value= " + sltTarget.options[i].value + " <br/> " ;
}
document.getElementById( " showInfo " ).innerHTML = myhtml;
}
</ script >
</ head >
< body >
< select ondblclick ="removeItem();" id ="sltSrc" multiple ="true" style ="height:150px;width:150px" >
< option value ="a" > srcA </ option >
< option value ="b" > srcB </ option >
< option value ="c" > srcC </ option >
</ select >
< select ondblclick ="addItem();" id ="sltTarget" multiple ="true" style ="height:150px;width:150px" >
< option value ="a" > targetA </ option >
< option value ="b" > targetB </ option >
< option value ="c" > targetC </ option >
</ select >
< div id ="showInfo" ></ div >
< input type ="button" value ="showSelectOptions" onclick ="showSelectOptions();" />
</ body >
</ html >