本文实例讲述了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)
(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.
<script><br />
function listboxMove(listID, direction) {<br />
var listbox = document.getElementById(listID);<br />
var selIndex = listbox.selectedIndex;<br />
if(-1 == selIndex) {<br />
alert("Please select an option to move.");<br />
return;<br />
}<br />
var increment = -1;<br />
if(direction == 'up')<br />
increment = -1;<br />
else<br />
increment = 1;<br />
if((selIndex + increment) < 0 ||<br />
(selIndex + increment) > (listbox.options.length-1)) {<br />
return;<br />
}<br />
var selValue = listbox.options[selIndex].value;<br />
var selText = listbox.options[selIndex].text;<br />
listbox.options[selIndex].value = listbox.options[selIndex + increment].value<br />
listbox.options[selIndex].text = listbox.options[selIndex + increment].text<br />
listbox.options[selIndex + increment].value = selValue;<br />
listbox.options[selIndex + increment].text = selText;<br />
listbox.selectedIndex = selIndex + increment;<br />
}<br />
</script>
希望本文所述对大家的javascript程序设计有所帮助。
145
收藏
