Question

我想知道如何选择一个高度大约为4或5的选择框，旁边有一个向上和向下箭头来订购这些条目？事实上，我需要使用PHP从数据库中绘制条目，使用框对它们进行排序，然后将它们提交回数据库。所以它不仅仅是一种审美变化，它实际上要改变它们的ID吗？这可能吗？

干杯， BlackWraith

〜EDIT〜
这是我想要使用的代码，我只想重新排列条目并记录条目的新顺序。

<select size="4">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
</select>

<br>
<br>
<input type="button" value="Up">
<br>
<input type="button" value="Down">

Answer 1

你可以使用现成的jQuery UI Sortable控件更加花哨：http://jqueryui.com/demos/sortable/

Answer 2

你正在寻找这个吗？ http://jsfiddle.net/DKCtV/1/

例如，不知道你有哪种选择框

<div><input type='text' value='1' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>
<div><input type='text' value='2' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>
<div><input type='text' value='3' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>
<div><input type='text' value='4' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>
<div><input type='text' value='5' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>
<div><input type='text' value='6' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>
<div><input type='text' value='7' name='field[]' />
     <span class='up'>Up</span><span class='down'>Down</span></div>

和jquery代码

$('.up').css('cursor','pointer').click(function(){
  $(this).parents('div').insertBefore($(this).parents('div').prev());
});

$('.down').css('cursor','pointer').click(function(){
  $(this).parents('div').insertAfter($(this).parents('div').next());
});

另一个解决方案是只移动值，而不是标签:)） http://jsfiddle.net/a3HV7/2/

$('.up').css('cursor','pointer').click(function(){
  var prev = $(this).parents('div').prev().find('input'), oldval = prev.val();
  prev.val($(this).siblings('input').val());
  $(this).siblings('input').val(oldval);
});

$('.down').css('cursor','pointer').click(function(){
  var next = $(this).parents('div').next().find('input'), oldval = next.val();
  next.val($(this).siblings('input').val());
  $(this).siblings('input').val(oldval);
});

Answer 3

作为我的“ObCollectionOrdered”组件的一部分，我有一个例子（基本上是一个数组抽象，可以很容易地管理有序对象的集合）：

http://depressedpress.com/javascript-extensions/dp_obcollectionordered/

示例如下：

http://home.comcast.net/~kiwidust/JSExtensions/DP_ObCollectionOrdered/Example1.htm

它基本上只是将“选项”对象加载到一个集合中 - 这使您可以非常简单地访问它们进行各种移动和排序。然后有一个简单的功能来重绘选择。

“条目的顺序”保存在集合中以供随时访问。

如果您已经使用了一个表单框架，那么大多数表单框架都有内置功能 - 但是如果您想快速添加到vanilla代码中，这应该可以解决问题。如果你需要更简单的东西，你总是可以从这个组件中剥离不需要的东西。

希望这有帮助。

Answer 4

我决定使用jQuery'sortable'函数。感谢所有帮助过的人

订购＆＃39;选择＆＃39;使用javascript条目？

4 个答案: