嘖嘖嘖，短短兩個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/ 黑暗执行绪
分享到：
相关推荐
相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的。 具体代码如下： <center> <table> <tr align=center> <td colspan=3> 选择 </td> </tr> <tr> <td> <select id=fb_list name=fb_list ...
DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> </head> <body> <select id="unsel" size="" multiple&...
类似word选项的左移右移功能 经典list 到 list 的移动，并且支持上移和下移。 大家学习学习。
此选项设置“虚拟” <option> ['string']的文本 嵌套[true] 这将打开和关闭<optgroup>的[true / false] prependTo ['body'] 设置要放入菜单的容器元素。 [“ CSS选择器”] switchWidth [480] 设置网站菜
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 <!...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！ 运行效果图：...
双击也可以移动 [1].[代码] [removed] $(function(){ //移到右边 $("#add").click(function(){ //获取选中的选项，删除并追加给对方 $("#select1 option:selected").appendTo("#select2"); }); //移到左边 $("#...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
combo-select是一款jQuery支键盘控制和列表选项搜索的下拉列表框jQuery插件。该下拉列表框插件支持键盘控制，支持在列表选项中进行搜索过滤。在移动数据和平板电脑上会回退为原生的select列表框。
3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本...
DOM选项移动操作</title> <style> select { width: 100px; height: 85px; } div { display: inline-block; width: 50px } </style> </head> <body> <select id="unsel...
关于组件该组件是根据需要创建的：人们无法在没有技巧的情况下使用CSS来定制本机选择，并且jQuery中的大多数自定义选择在移动设备上无法很好地工作。 如果您执行以下操作，则jquery-sth-select对您很有用： 有一个...
移动互联网的发展，促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI ... 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fiel
Combo Select 是一款友好的 jQuery 下拉框插件，在 PC 浏览器上它能模拟一个简单漂亮的下拉框，在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤，同时支持键盘控制。
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案，比如，如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果，以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
在 IE6 和移动设备上，它只会显示SELECT元素 用法 $('select').jqCombo(); 选项 // These options are the defaults $('select').jqCombo({ expandOnFocus : true, expandSize : 10, notfoun
专为主题而设计主题混合支持使用前缀选择器同时支持简单和多个选择字段完全响应，适合任何宽度（可选）用于简单选择字段的默认占位符（可选）具有最小字段阈值的搜索栏（可选）最大可选选项完整的键盘事件集成选项...
最近用jQuery来写下拉框的选项值的左右移动，代码如下： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <...