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 相关文章推荐
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
js处理表格对table进行修饰
May 26 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
JavaScript编写开发动态时钟
Jul 29 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 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP生成月历代码
2007/06/14 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
遗嘱继承公证书
2014/04/09 职场文书
企业诚信承诺书
2014/05/23 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
付款证明格式范文
2015/06/19 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL