JavaScript实现两个listbox的option数据转移

Html：

我 在option自定了“tag”属性，目的，是实现option在两个listbox之间转移之后，要将两边都要进行“排序”（这点很重要，希望大家注意下，往往有些option的顺序是很有意义的），

也许大家会问我，问什么不直接在option的value上赋值？

回答是：（视情况而定），因为，option的text往往不能代表我们要获取的值，而我们有时必须要借助value或者自定的属性的值，这里，我就写了最通用的方法，这样，无论什么时候，都不妨碍，我的option的val定义什么要的值（当然，用不用value，听你的，程序员本来就是艺术家）；

　　下面就讲解下js的部分，我先贴出代码：

//备份时间 排序
//向右
function TimeListBoxRight() {
var leftlb = document.getElementById("xuanyongTimelb");
var rightlb = document.getElementById("keyongTimelb");

var arrtext = new Array();
var arrvalue = new Array();
var arrtag = new Array();
var arrindex = new Array();

var j = 0;
for (var i = 0; i < leftlb.options.length; i++) {
if (leftlb.options[i].selected == true) {
//leftlb.options.add(new Option(rightlb.options[i].text, rightlb.options[i].value));
//rightlb.options.remove(i);
arrtext[j] = leftlb.options[i].text;
arrvalue[j] = leftlb.options[i].value;
arrtag[j] = leftlb.options[i].getAttribute("tag");
arrindex[j] = i;
j++;
}
}

//添加
for (var k = 0; k < arrvalue.length; k++) {
var opt = new Option();
opt.value = arrvalue[k];
opt.text = arrtext[k];
opt.setAttribute("tag", arrtag[k]);
rightlb.options[rightlb.options.length] = opt;
}

//冒泡排序
for (var m = 0; m < rightlb.options.length - 1; m++) {
for (var l = 0; l < rightlb.options.length - 1 - m; l++) {
if (Number(rightlb.options[l].getAttribute("tag")) > Number(rightlb.options[l + 1].getAttribute("tag"))) {

var temp = new Option();
temp.value = rightlb.options[l].value;
temp.text = rightlb.options[l].text;
temp.setAttribute("tag", rightlb.options[l].getAttribute("tag"));

rightlb.options[l].value = rightlb.options[l + 1].value;
rightlb.options[l].text = rightlb.options[l + 1].text;
rightlb.options[l].setAttribute("tag", rightlb.options[l + 1].getAttribute("tag"));

rightlb.options[l + 1].value = temp.value;
rightlb.options[l + 1].text = temp.text;
rightlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag"));

}
}
}

//删除
for (var n = arrindex.length - 1; n >= 0; n--) {
leftlb.options.remove(arrindex[n]);
}

if (leftlb.options.length <= 0) {
$("#righttimeid").disable = true;
}

}

//Item 向左
function TimeListBoxLeft() {
var leftlb = document.getElementById("xuanyongTimelb");
var rightlb = document.getElementById("keyongTimelb");

var arrtext = new Array();
var arrvalue = new Array();
var arrtag = new Array();
var arrindex = new Array();

var j = 0;
for (var i = 0; i < rightlb.options.length; i++) {
if (rightlb.options[i].selected == true) {
//leftlb.options.add(new Option(rightlb.options[i].text, rightlb.options[i].value));
//rightlb.options.remove(i);
arrtext[j] = rightlb.options[i].text;
arrvalue[j] = rightlb.options[i].value;
arrtag[j] = rightlb.options[i].getAttribute("tag");
arrindex[j] = i;
j++;
}
}

//添加
for (var k = 0; k < arrvalue.length; k++) {
var opt = new Option();
opt.value = arrvalue[k];
opt.text = arrtext[k];
opt.setAttribute("tag", arrtag[k]);
leftlb.options[leftlb.options.length] = opt;
}

//冒泡排序
for (var m = 0; m < leftlb.options.length - 1; m++) {
for (var l = 0; l < leftlb.options.length - 1 - m; l++) {
if (Number(leftlb.options[l].getAttribute("tag")) > Number(leftlb.options[l + 1].getAttribute("tag"))) {

var temp = new Option();
temp.value = leftlb.options[l].value;
temp.text = leftlb.options[l].text;
temp.setAttribute("tag", leftlb.options[l].getAttribute("tag"));

leftlb.options[l].value = leftlb.options[l + 1].value;
leftlb.options[l].text = leftlb.options[l + 1].text;
leftlb.options[l].setAttribute("tag", leftlb.options[l + 1].getAttribute("tag"));

leftlb.options[l + 1].value = temp.value;
leftlb.options[l + 1].text = temp.text;
leftlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag"));

}
}
}

//删除
for (var n = arrindex.length - 1; n >= 0; n--) {
rightlb.options.remove(arrindex[n]);
}

if (rightlb.options.length <= 0) {
$("#lefttimeid").disable = true;
}

}

　　上面的代码也已经很详细了。

　　注意点（或许能对你有些用处）：

　　1.在option上自定的属性（“tag”）后，你需要明白，如果通过js 得到 “tag”，或者设置“tag”的值，

leftlb.options[i].getAttribute("tag"); //获取tag的值

leftlb.options[l + 1].setAttribute("tag", temp.getAttribute("tag")); //设置“tag”的值

　　2.html的 Select里面的option 在javascript中如何定义：　　

var opt = new Option();
//在给“tag”赋值的时候，切记，不要学text，value那样干，（或许 . 你用来会很顺手）；

　　3.当我们在转移之后，我们又重新排序，这里，你想用什么方法排就用什么方法排（算法的灵活运用）。当然，还是要注意：tag的赋值;

//下面的方法，我努力尝试，不过，不管用；
var temp = leftlb.options[l];
leftlb.options[l] = leftlb.options[l+1];
leftlb.options[l+1] = temp;



JavaScript控制两个列表框listbox左右交换数据的方法

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下：

这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性全部移动

function listbox_moveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count++) {
if(src.options[count].selected == true) {
var option = src.options[count];
var newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption, null); //Standard
src.remove(count, null);
}catch(error) {
dest.add(newOption); // IE only
src.remove(count);
}
count--;
}
}
}
//..
listbox_moveacross('countryList', 'selectedCountryList');

下面是像是的演示效果代码，可以直接在浏览器内执行

Click below buttons to move selected options right or left.

Afghanistan Bahamas Barbados Belgium Bhutan China Croatia Denmark France

>> <<

Afghanistan Bahamas Barbados Belgium Bhutan China Croatia Denmark France