多选列表Select之双击删除与添加Demo
<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>