jquery移动listbox的值原理及代码

时间:2020-05-13 人气:0

jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox，这样也可以熟悉一下json的使用方法。

先看看简单的html，因为服务器控件会自动转换为html标签，所以在例子中，我并没有用服务器控件。如下：
<asp:ListBox></asp:ListBox>
会自动转换成：<select></select>
html代码如下：

复制代码代码如下:

json数据结构如下：

复制代码代码如下:

/https://img.qb5200.com/download-x/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 += "<option value=" + n.data + ">" + n.text + "</option>";
});
//绑定数据到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();
});

加载全部内容