管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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

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

　　

复制代码 代码如下:
function listbox_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

　　下面是详细的演示代码，可以在浏览器内使用

　　

复制代码 代码如下:
Click below buttons to select or deselect all options from select box.<br>

　　<select id="lsbox" name="lsbox" size="10" multiple="">

　　<option value="1">India</option>

　　<option value="2">United States</option>

　　<option value="3">China</option>

　　<option value="4">Italy</option>

　　<option value="5">Germany</option>

　　<option value="6">Canada</option>

　　<option value="7">France</option>

　　<option value="8">United Kingdom</option>

　　</select> <br>

　　<button onclick="listboxMove('lsbox', 'up');">Move Up</button>

　　<button onclick="listboxMove('lsbox', 'down');">Move Down</button>

　　<script>

　　function listboxMove(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;

　　}

　　</script>

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

教程首页 更多教程