要实现jquery控制listbox中项的移动并排序,需要以下几个步骤:
- 首先在HTML页面中创建两个列表框,这两个列表框分别是源列表框和目标列表框,即用户可以从源列表框中选择移动项目到目标列表框中。示例代码如下:
<select id="sourceListBox" multiple>
<option value="1">List Item 1</option>
<option value="2">List Item 2</option>
<option value="3">List Item 3</option>
<option value="4">List Item 4</option>
<option value="5">List Item 5</option>
</select>
<select id="targetListBox" multiple>
</select>
- 接下来需要编写jquery代码来实现listbox中项的移动。首先需要定义按钮和事件处理函数,事件处理函数需要获取选中的项目并将其移动到目标列表框中。
<button id="moveLeftButton">Move Left</button>
<button id="moveRightButton">Move Right</button>
<script>
$(document).ready(function(){
$("#moveRightButton").click(function(){
$("#sourceListBox option:selected").each(function(){
$('#targetListBox').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
$("#moveLeftButton").click(function(){
$("#targetListBox option:selected").each(function(){
$('#sourceListBox').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$(this).remove();
});
});
});
</script>
上述代码中,'#moveRightButton'和'#moveLeftButton'分别表示移动按钮。点击移动按钮后,jquery会遍历源列表框或目标列表框中选中的项目,将其以相应值和文本的形式添加进另一个列表框中,并从原来的列表框中删除。
- 最后需要编写代码来为列表框排序。为了实现对列表框项的排序,需要将列表框中选项的值和文本存储到数组中,并对数组进行排序,最后将排序后的数组重新添加到列表框中。
<button id="sortButton">Sort</button>
<script>
$(document).ready(function(){
$("#sortButton").click(function(){
var options = $('#targetListBox option');
var arr = options.map(function(_, o) { return { t: $(o).text(), v: o.value }; }).get();
arr.sort(function(o1, o2) {
return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
});
options.each(function(i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
});
});
</script>
上述代码中,'#sortButton'表示排序按钮,点击按钮后,jquery会遍历目标列表框中的选项,将选项的值和文本存储到数组中,对数组进行排序,并将排序后的数组重新添加到目标列表框中。
综上所述,实现jquery控制listbox中项的移动并排序的完整攻略如下:
-
在HTML页面中创建源列表框和目标列表框。
-
编写jquery代码来实现列表框中项的移动。
-
编写代码来为列表框排序。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jquery控制listbox中项的移动并排序的实现代码 - Python技术站