欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jquery移动listbox的值原理及代码

时间:2022-07-09 09:36:55|栏目:jquery|点击:
jQuery操作listbox原理并不难,就是将listbox中的选中项进行移动,实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox,这样也可以熟悉一下json的使用方法。

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

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

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

上一篇:jquery实现下拉框左右选择功能

栏    目:jquery

下一篇:没有了

本文标题:jquery移动listbox的值原理及代码

本文地址:http://www.codeinn.net/misctech/207307.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有