使多选控件可排序
使多选控件可排序
提问于 2010-07-08 07:37:01
有谁知道如何使多选(见下文HTML)可排序？使用jQuery或Ext？通过可排序，我的意思是我可以向上或向下拖动一个项(一个选项)来重新定位它在选择控件中的位置。
<select id="testing" multiple=multiple>
<option>First Option</option>
<option>Second Option</option>
<option>Third Option</option>
<option>Forth Option</option>
<option>5 Option</option>
<option>6 Option</option>
<option>7 Option</option>
</select>回答 3
Stack Overflow用户
回答已采纳
发布于 2010-07-08 08:03:22
你不能通过拖放的方式可靠地做到这一点。可以使用OS选择列表小部件来实现<select multiple>，该小部件通常不会像原生mouse元素那样生成HTML事件。
您必须用大量的<div>类似物替换<select>，无论您想使用哪个库/插件来提供正常的可排序性，您都可以使用它。然而，让一个伪装的<select>很好地访问/可用/可键盘是一件相当麻烦的事情；大多数插件并不能真正做到完全。
更简单的替代方法是使用单独的‘move up’/‘move down’按钮，这两个按钮可以查找并移动元素中选定的<option>。
Stack Overflow用户
发布于 2010-07-08 07:40:52
jQuery UI具有使内容可排序的功能。参见http://jqueryui.com/demos/sortable/。
Stack Overflow用户
发布于 2012-06-22 18:17:50
经过一番学习和寻找，我从网上得到了解决方案。请尝试以下方法-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#move-up').click(moveUp);
$('#move-down').click(moveDown);
});
function moveUp() {
$('#selected-items select :selected').each(function(i, selected) {
if (!$(this).prev().length) return false;
$(this).insertBefore($(this).prev());
});
$('#selected-items select').focus().blur();
}
function moveDown() {
$($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
if (!$(this).next().length) return false;
$(this).insertAfter($(this).next());
});
$('#selected-items select').focus().blur();
}
</script>
</head>
<body>
<div id="selected">
<div><strong>Selected</strong></div>
<div id="selected-items">
<select multiple="multiple" id="selected_fields" name="selected_fields[]">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</div>
</div>
<div id="priority">
<div><input type="button" id="move-up" value="UP" /></div>
<div><input type="button" id="move-down" value="DOWN" /></div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3199689
复制相关文章
相似问题