看我美食网

全部频道

您的当前位置：首页使用javascript实现ListBox左右全选,单选,多选,全请_javascript技巧

使用javascript实现ListBox左右全选,单选,多选,全请_javascript技巧

来源：看我美食网


代码如下:



list测试



注1：左右移动进行选取




注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。







//上移
function moveUp() {
var theObjOptions = document.frm.ObjSelect.options;
for (var i = 1; i < theObjOptions.length; i++) {
if (theObjOptions[i].selected && !theObjOptions[i - 1].selected) {
swapOptionProperties(theObjOptions[i], theObjOptions[i - 1]);
}
}
}


//下移
function moveDown() {
var theObjOptions = document.frm.ObjSelect.options;
for (var i = theObjOptions.length - 2; i > -1; i--) {
if (theObjOptions[i].selected && !theObjOptions[i + 1].selected) {
swapOptionProperties(theObjOptions[i], theObjOptions[i + 1]);
}
}
}


function swapOptionProperties(option1, option2) {
var tempStr = option1.value;
option1.value = option2.value;
option1.value = tempStr;
tempStr = option1.text;
option1.text = option2.text;
option2.text = tempStr;
tempStr = option1.selected;
option1.selected = option2.selected;
option2.selected = tempStr;
}


//列表框的位置移动
function moveLeftOrRight(fromObj, toObj) {
for (var i = 0; i < fromObj.length; i++) {
var srcOption = fromObj.options[i];
if (srcOption.selected) {
toObj.appendChild(srcOption);
i--;
}
}
}

显示全文