JavaScript控制listbox列表框的項目上下移動的方法

2024-05-06 16:17:08

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JavaScript控制listbox列表框的項目上下移動的方法,實例分析了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>