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

最新推荐文章于 2021-06-30 11:52:35 发布
最新推荐文章于 2021-06-30 11:52:35 发布
阅读量190 收藏
点赞数
分类专栏： JS 文章标签： jQuery JavaScript Ajax .net HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DarKeViLzAc/article/details/83433497
版权

嘖嘖嘖，短短兩個API串接: $opt.next().after($opt)就做出了<option>向下移動的效果。記得以往用純Javascript寫，還得判斷是否為最後一個，若是就不能下移；然後上下位置交換得用options[index]搞半天。不得不要再次讚嘆jQuery的神奇!

<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>

 

转载自: http://blog.darkthread.net/ 黑暗执行绪

DarKeViLzAc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现列表上下移动功能
12-28
废话少说，我们开始进入主题。 今天我们实现的是一个列表页面上移、下移功能。如图： 当勾选列表中的列时，点击上移或者下移，会动态上移或者下移。 html代码如下： <input type=button onclick=up(); value= 上移 > <input type=button onclick=down(); value= 下移 >
jquery实现上下滑动选择
weixin_30613343的博客
09-22 628
$('.rightShow').on('mousewheel', function(ev) { var dir = ev.originalEvent.wheelDelta if(dir == 120) { console.log('向上'); var num = parseInt($(this).find('ul').css('top')...
（四）jQuery实现元素向上向下滑动效果
北斗星的爱886的博客
06-30 2302
1、slideDown（）方法 slideDown() 方法用于向下滑动元素。 $("button").click(function(){ $("#div").slideDown(); }); 2、slideUp（）方法 slideUp() 方法用于向上滑动元素。 $("button").click(function(){ $("#div").slideUp(); }); 3、slideToggle（）方法 slideToggle() 方法可以在 slideDown() 与 slide
jq实现上下滚动
csz_12345的博客
05-13 1911
实现上上下滚动效果 啥也不说上效果 引入资源文件jq <script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script> css * { margin: 0; padding: 0; } .scroll-box { width: 200px; height: 100px; border: 2
jquery实现select选择框内容左右移动代码分享
01-19
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 <!...
基于jquery实现select选择框内容左右移动添加删除代码分享
11-24
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！ 运行效果图：...
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 ...
java Script ,jquery 写的 select 中的option 左右移动，上下移动
06-19
类似word选项的左移右移功能 经典list 到 list 的移动，并且支持上移和下移。 大家学习学习。
移动端和pc端拖动排序
07-24
移动端和pc端列表点击住按钮，然后可以上下拖动进行排序，主要使用了基于drag-arrange.js插件，然后使用了touch相关事件实现，支持移动端和pc端。
jquery实现上下移动
05-15
选择表格中的内容，按上下键调整顺序，序号也随之变动。
jquery 实现的 select 上移、下移、左移、右移功能
11-19
jquery 实现的 select 上移、下移、左移、右移功能 下载下来直接预览效果
jQuery Select 上移下移
07-03
Select上移下移 jQuerySelect jQuerySelect移动 Select上下移动
jQuery操作SelectOption上下移动
半步多
11-18 3560
完整版见https://jadyer.github.io/2013/11/18/jquery-select-option/
JQuery实现select互换数据和上下移动
09-30
功能类似struts2 optiontransferselect 标签的jquery组件 非常好用的一个JQuery组件
03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)
热门推荐
光脚丫思考的专栏
09-11 3万+
一、文章大纲 二、安装环境 本文基于如下的环境进行试验的： Windows 10中文64位专业版。 v12.18.3版本的Node.js。 @vue/cli 4.5.4的Vue.js和cli。 三、安装vue-cli 使用npm全局安装vue-cli： npm install -g @vue/cli 可以使用如下的创建项目的命令，查看vue cli的安装情况： 按照上面的提示，先卸载之前的版本，然后安装新的版本。 安装成功后，如果要查看安装的cli的版本，可以执行命令：
<!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、付费专栏及课程。

余额充值