JavaScript控制listbox列表框的项目上下移动的方法_Javascript教程-查字典教程网
JavaScript控制listbox列表框的项目上下移动的方法
JavaScript控制listbox列表框的项目上下移动的方法
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法。分享给大家供大家参考。具体分析如下:这段JS代码可以控制li...

本文实例讲述了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>Move Up</button>

<button>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程序设计有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类