脚本宝典收集整理的这篇文章主要介绍了js实例教程-jquery移动listbox的值原理及代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox，这样也可以熟悉一下json的使用方法。
先看看简单的html，因为服务器控件会自动转换为html标签，所以在例子中，我并没有用服务器控件。如下：
<asp:ListBox></asp:ListBox>
会自动转换成：<select></select>
html代码如下：

. 代码如下:

<p style="width:240px;">
<p style="width:100px;float:left;">
<select size="4" name="listLeft" id="listLeft" class="normal">
</select>
</p>
<p style="width:40px;float:left; padding-top:20px;">
<input type="button" id="btnRight" value=">>" /><br />
<input type="button" id="btnLeft" value="<<" />
</p>
<p style="width:100px;float:left;">
<select size="4" name="listRight" id="listRight" class="normal">
</select>
</p>
</p>

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 += "<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();
});

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！&nbsp;js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-jquery移动listbox的值原理及代码全部内容，希望文章能够帮你解决js实例教程-jquery移动listbox的值原理及代码所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。