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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
php与js的区别是什么
Aug 05 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
Javascript函数式编程语言
Oct 11 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP的加密方式及原理
2012/06/14 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
浅谈python中get pass用法
2019/03/19 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
python中count函数知识点浅析
2020/12/17 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
学生自我鉴定范文
2013/10/04 职场文书
儿科护士自我鉴定
2013/10/14 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
新郎婚礼致辞
2015/07/27 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
JS实现九宫格拼图游戏
2022/06/28 Javascript