JavaScriptがlistboxリストボックスの項目の上下をコントロールする方法
3638 ワード
本明細書の例は、JavaScriptがlistboxリストボックスの項目の上下を制御する方法を説明する.皆さんの参考にしてください.具体的な分析は以下の通りです.
このJSコードは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> 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>