用jQuery实现<select>选项上下移动

最新推荐文章于 2015-06-01 16:53:05 发布
最新推荐文章于 2015-06-01 16:53:05 发布
阅读量477 收藏
点赞数

用jQuery实现<select>选项上下移动  

<html> 
<head>  
<script type='text/javascript'    
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>  
<script type='text/javascript'>  
$(function() {   
$("#btnMoveUp,#btnMoveDown").click(function() {   
  var $opt = $("#selList option:selected:first");   
  if (!$opt.length) return;   
  if (this.id == "btnMoveUp") $opt.prev().before($opt);   
  else $opt.next().after($opt);   
});   
//按Alt加上下鍵也可以移動   
$("#selList").keydown(function(evt) {   
  if (!evt.altKey) return;   
  var k = evt.which;   
  if (k == 38) { $("#btnMoveUp").click(); return false; }   
  else if (k == 40) { $("#btnMoveDown").click(); return false; }   
});   
});   
</script>  
</head><body>  
<select id='selList' size='7' style='width: 100px'>  
<option>Item 1</option>  
<option>Item 2</option>  
<option>Item 3</option>  
<option>Item 4</option>  
<option>Item 5</option>  
</select><br />  
<input type="button" value="▲" id="btnMoveUp" title="快速鍵: alt+向上" />  
<input type="button" value="▼" id="btnMoveDown" title="快速鍵: alt+向下"/>  
</body>  
</html>


wbbzj2006
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
select框上下移动排序
06-23
对select框内元素上下移动排序
JQuery特效，上下移动的选项卡
爱我所爱，无处不在
08-28 1876
以下所用的Jquery代码库点击这里下载 *{ padding:0px; margin:0px;} body{ font-size:12px;} #accdiorn{ width:400px; he
jquery select 上移下移
hughjin
06-01 651
<!--jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移 源码：--> MultiSelects(左右选框) 完美版 <!-- $(function(){ $("#s1 option:first,#s2 option:first").attr("selected",true); $("#s1").dblclic
JS实现Select的option上下移动的方法
10-22
主要介绍了JS实现Select的option上下移动的方法,涉及JavaScript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
基于jquery实现select选择框内容左右移动添加删除代码分享
11-24
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！ 运行效果图：...
jquery实现select选择框内容左右移动代码分享
01-19
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 <!...
jQuery实现Select左右复制移动内容
11-27
双击也可以移动 [1].[代码] [removed] $(function(){ //移到右边 $("#add").click(function(){ //获取选中的选项，删除并追加给对方 $("#select1 option:selected").appendTo("#select2"); }); //移到左边 $("#...
全面解析DOM操作和jQuery实现选项移动操作代码分享
11-22
DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> </head> <body> <select id="unsel" size="" multiple&...
Jquery实现select multiple左右添加和删除功能的简单实例
01-19
相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的。 具体代码如下： <center> <table> <tr align=center> <td colspan=3> 选择 </td> </tr> <tr> <td> <select id=fb_list name=fb_list ...
jquery 实现的 select 上移、下移、左移、右移功能
11-19
jquery 实现的 select 上移、下移、左移、右移功能 下载下来直接预览效果
jQuery Select 上移下移
07-03
Select上移下移 jQuerySelect jQuerySelect移动 Select上下移动
jQuery商品价格选择器
11-11
jQuery商品价格选择器
jquery select 上移下移
robinpipi的专栏
08-02 3911
网上搜到的，不太明白这个插件指的是什么。 但是把代码拷到文件中，修改。确实可以实现上移下移。 <!--jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移 源码：--> MultiSelects(左右选框)
钢筋混凝土污水池及提升泵站施工方案.doc
05-03
课程设计污水处理
PHP基于Web的subversion用户管理系统(源代码+设计说明书).zip
05-03
PHP基于Web的subversion用户管理系统(源代码+设计说明书).zip
node-v12.22.10-linux-armv7l.tar.xz
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
The Experiment 3 of Engineering Electromagnetics.pdf
最新发布
05-03
The Experiment 3 of Engineering Electromagnetics.pdf
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body> <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> </tr> </tbody> </table> <button onclick="addRow('myTable')">增加</button> </body> </html>将这段代码用bootstrap进行优化
04-23
cell.innerHTML = '<select class="form-control"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值