JavaScript控制listbox列表框的项目上下移动的方法

前端之家收集整理的这篇文章主要介绍了JavaScript控制listbox列表框的项目上下移动的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JavaScript控制listBox列表框的项目上下移动的方法分享给大家供大家参考。具体分析如下:

这段JS代码可以控制listBox内的元素向上或者向下移动,这个功能非常有用。下面是详细的代码

代码如下:
Box_move(listID,direction) { var listBox = document.getElementById(listID); var selIndex = listBox.selectedIndex; if(-1 == selIndex) { alert("Please select an option to move."); return; } var increment = -1; if(direction == 'up') increment = -1; else increment = 1; if((selIndex + increment) < 0 || (selIndex + increment) > (listBox.options.length-1)) { return; } var selValue = listBox.options[selIndex].value; var selText = listBox.options[selIndex].text; listBox.options[selIndex].value = listBox.options[selIndex + increment].value listBox.options[selIndex].text = listBox.options[selIndex + increment].text listBox.options[selIndex + increment].value = selValue; listBox.options[selIndex + increment].text = selText; listBox.selectedIndex = selIndex + increment; } //.. //.. listBox_move('countryList','up'); //move up the selected option listBox_move('countryList','down'); //move down the selected option
下面是详细的演示代码,可以在浏览器内使用
代码如下:
Box.

希望本文所述对大家的javascript程序设计有所帮助。

猜你在找的JavaScript相关文章