讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

jquery移动listbox的值原理及代码_jquery

php中文网
发布： 2016-05-16 17:34:45
原创
1371人浏览过

jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox，这样也可以熟悉一下json的使用方法。

先看看简单的html，因为服务器控件会自动转换为html标签，所以在例子中，我并没有用服务器控件。如下：

会自动转换成：
html代码如下：

腾讯AI 开放平台
腾讯AI 开放平台

腾讯AI开放平台

腾讯AI 开放平台 381
查看详情 腾讯AI 开放平台
复制代码 代码如下:















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 += "";
});
//绑定数据到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

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：jQuery fadeTo方法调整图片的透明度使用介绍_jquery 下一篇：animate动画示例(泪奔的小孩)及stop和delay的使用_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
什么是javascript闭包_它有什么实际用途？ JavaScript闭包是函数与其词法作用域中被捕获的外部变量组成的组合，形成于内部函数引用外部变量且在外部函数返回后仍存在时，用于封装私有变量、解决循环绑定问题、实现函数工厂与柯里化等。
2025-12-17 22:06:39
856
什么是javascript代码压缩_如何减小文件大小？ JavaScript代码压缩的核心操作包括删除空白符与注释、变量函数名混淆、合并声明与简化语句、删除未使用代码；主流工具如Terser、UglifyJS通过构建工具（Webpack/Vite）或命令行自动执行，配合Gzip/Brotli、按需加载、移除调试代码等进一步优化。
2025-12-17 22:05:02
971
javascript WeakMap和WeakSet是什么_它们与Map和Set有何不同？ WeakMap和WeakSet是专为不干扰垃圾回收设计的集合类型，只接受对象作为键或元素，对其使用弱引用，当对象无其他强引用时会被自动回收。
2025-12-17 21:55:02
414
javascript如何实现列表渲染_ key属性为什么重要 JavaScript列表渲染需用key标识元素身份以保障高效更新，原生JS无key机制导致重绘丢失状态，React等框架要求唯一、稳定、可预测的key（如id）而非index，否则引发错误复用和性能问题。
2025-12-17 21:45:02
100
javascript跨域问题是什么_如何解决CORS限制？ JavaScript跨域问题本质是浏览器同源策略限制，阻止脚本读取非同源响应；需后端配置Access-Control-Allow-Origin等CORS响应头，前端合理发起请求，单靠前端无法突破。
2025-12-17 21:43:33
579
什么是JavaScript的代码覆盖率_它如何衡量测试的完整性呢 JavaScript代码覆盖率是衡量测试广度的量化指标，反映已执行的代码行、函数、分支、语句占总量的比例，不表示测试质量；主流维度包括行覆盖、函数覆盖、分支覆盖和语句覆盖；低覆盖率提示关键路径或错误处理未测，高覆盖率未必代表正确性，应结合业务意图与其他保障手段综合使用。
2025-12-17 21:38:34
128
javascript中的Map和Set是什么_何时使用它们？ Map和Set是ES6引入的原生集合类型：Map支持任意类型键、保留插入顺序、无原型污染；Set专注唯一值去重与存在性判断，性能优于数组。
2025-12-17 21:37:24
699
如何用JavaScript实现本地存储？ JavaScript本地存储主要使用localStorage和sessionStorage，二者均以字符串键值对形式存储数据，API相同但生命周期不同：localStorage永久保存，sessionStorage仅限当前标签页。
2025-12-17 21:34:02
998
JavaScript find和findIndex如何用_它们如何查找元素？ find返回第一个匹配元素值，findIndex返回其索引；均不修改原数组，找到即停，未找到时分别返回undefined和-1。
2025-12-17 21:31:18
692
什么是JavaScript的默认参数_它如何让函数更健壮呢 JavaScript默认参数在函数定义时为形参预设值，调用时传undefined或不传则启用；支持表达式和函数调用（每次重新求值），但null不触发默认值，需用??或三元运算符处理。
2025-12-17 21:30:52
358
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部