jquery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox，这样也可以熟悉一下json的使用方法。
先看看简单的html，因为服务器控件会自动转换为html标签，所以在例子中，我并没有用服务器控件。如下：
会自动转换成：
html代码如下：
复制代码 代码如下:
>>
json数据结构如下：
复制代码 代码如下:
//data
var vdata = { datalist:
[
{ data: jquery, text: jquery },
{ data: asp.net, text: asp.net },
{ data: internet, text: internet },
{ data: sql, text: sql }
]
};
下边就是jquery实现代码，其中关键地方做了注释。
复制代码 代码如下:
//bind data
var vlist = ;
//遍历json数据
jquery.each(vdata.datalist, function(i, n) {
vlist += + n.text + ;
});
//绑定数据到listleft
$(#listleft).append(vlist);
//left move
$(#btnright).click(function() {
//数据option选中的数据集合赋值给变量vselect
var vselect = $(#listleft option:selected);
//克隆数据添加到listright中
vselect.clone().appendto(#listright);
//同时移除listright中的option
vselect.remove();
});
//right move
$(#btnleft).click(function() {
var vselect = $(#listright option:selected);
vselect.clone().appendto(#listleft);
vselect.remove();
});