jquery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox,这样也可以熟悉一下json的使用方法。
先看看简单的html,因为服务器控件会自动转换为html标签,所以在例子中,我并没有用服务器控件。如下:
<: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>
. 代码如下:
//data
var vdata = { "datalist":
[
{ "data": "jquery", "text": "jquery" },
{ "data": "asp.net", "text": "asp.net" },
{ "data": "internet", "text": "internet" },
{ "data": "sql", "text": "sql" }
]
};
. 代码如下:
//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 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论