<html>
<head>
<title>javascript 列表框左右移动</title>
<style type="text/css">
select{100px;height:100px;}
</style>
<script type="text/javascript">
function roveRight(){
var lBox = document.getElementById("leftBox");
var rBox = document.getElementById("rightBox");
var count = 0;
for(i=0;i<lBox.length;i++){
if(lBox[i].selected){
//添加一个option:new Option(text,value)
rBox.options.add(new Option(lBox[i].text,lBox.value));
count++;
}
}
//循环用于同时删除多个option
for(i=0;i<count;i++){
lBox.remove(lBox.selectedIndex);
}
}
function roveleft(){
var lBox = document.getElementById("leftBox");
var rBox = document.getElementById("rightBox");
var count = 0;
for(i=0;i<rBox.length;i++){
if(rBox[i].selected){
lBox.options.add(new Option(rBox[i].text,rBox.vale));
count++;
}
}
for(i=0;i<count;i++){
rBox.remove(rBox.selectedIndex);
}
}
</script>
</head>
<body>
<select id="leftBox" multiple="multiple">
<option value="北京"> 北京 </option>
<option value="上海"> 上海 </option>
<option value="广州"> 广州 </option>
<option value="深圳"> 深圳 </option>
</select>
<input type="button" id="addBtn" onclick="roveRight();" value=">>>" />
<input type="button" id="addBtn" onclick="roveleft();" value="<<<" />
<select id="rightBox" multiple="multiple">
<option value="成都"> 成都 </option>
<option value="深圳"> 深圳 </option>
<option value="南京"> 南京 </option>
<option value="天津"> 天津 </option>
</select>
</body>
</html>
之前写的一个比较麻烦的函数：
// function addItem(){
// var dSource = document.getElementById("leftBox");
// var dResult = document.getElementById("rightBox");
// var selIndex = dSource.selectedIndex;
//
// //添加一个option:new Option(text,value)
// dResult.options[dResult.options.length]=new Option(dSource.value,dSource.value);
// if(document.all){
// dSource.options[selIndex].removeNode(true);
// }
// else{
// dSource.removeChild(dSource.childNodes[selIndex]);
// }
// }
由于Firefox不支持removeNode，需要判断浏览器再分别使用不同的,Firefox要用removeChild()
/* 最近使用OO方式改进后的 */
<html>
<head>
<title>javascript 列表框左右移动 类</title>
<style type="text/css">
select{100px;height:100px;}
</style>
</head>
<body>
<select id="leftBox" multiple="multiple">
<option value="北京"> 北京 </option>
<option value="上海"> 上海 </option>
<option value="广州"> 广州 </option>
<option value="深圳"> 深圳 </option>
</select>
<input type="button" id="goRight" value=">>>" />
<input type="button" id="goLeft" value="<<<" />
<select id="rightBox" multiple="multiple">
<option value="成都"> 成都 </option>
<option value="深圳"> 深圳 </option>
<option value="南京"> 南京 </option>
<option value="天津"> 天津 </option>
</select>
<script type="text/javascript">
//构造函数
function moveSelect(selector){
this.s1 = selector.select1;
this.s2 = selector.select2;
this.t1 = selector.button1;
this.t2 = selector.button2;
//this.move(); //实例化后直接使用
}
//通过原型方式扩展方法
moveSelect.prototype = {
move: function(){
var _self = this;
_self.t1.onclick = function(){
var count = 0;
for(var i=0; i<_self.s1.length; i++){
if(_self.s1[i].selected){
_self.s2.options.add(new Option(_self.s1[i].text, _self.s1[i].value));
count++;
}
}
for(var s=0; s<count; s++){
_self.s1.remove(_self.s1.selectedIndex);
}
}
_self.t2.onclick = function(){
var count = 0;
for(var i=0; i<_self.s2.length; i++){
if(_self.s2[i].selected){
_self.s1.options.add(new Option(_self.s2[i].text, _self.s2[i].value));
count++;
}
}
for(var s=0; s<count; s++){
_self.s2.remove(_self.s2.selectedIndex);
}
}
}
}
//调用
var sElement = {
select1:document.getElementById("leftBox"),
select2:document.getElementById("rightBox"),
button1:document.getElementById("goRight"),
button2:document.getElementById("goLeft")
};
var m1 = new moveSelect(sElement);
m1.move();
</script>
</body>
</html>
javascript 列表框左右移动 类