jquery移动listbox的值原理及代码


Posted in Javascript onMay 03, 2013

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(); 
});
Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 #Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 #Javascript
基于KMP算法JavaScript的实现方法分析
May 03 #Javascript
JS动态获取当前时间,并写到特定的区域
May 03 #Javascript
JS实现商品倒计时实现代码
May 03 #Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 #Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python中urlparse模块介绍与使用示例
2017/11/19 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
使用Python更换外网IP的方法
2018/07/09 Python
python K近邻算法的kd树实现
2018/09/06 Python
python支付宝支付示例详解
2019/08/22 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python中count函数简单用法
2020/01/05 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Pycharm github配置实现过程图解
2020/10/13 Python
在校生钳工实习自我鉴定
2013/09/19 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
销售内勤岗位职责
2014/04/15 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书