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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
原生js实现表格翻页和跳转
Sep 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
JAVA/JSP学习系列之四
2006/10/09 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js继承的实现代码
2010/08/05 Javascript
javascript 闭包疑问
2010/12/30 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
什么是属性访问器
2015/10/26 面试题
什么是组件架构
2016/05/15 面试题
条幅标语大全
2014/06/20 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记