ホームページ > 記事 > ウェブフロントエンド > リストボックス項目を上下に移動するように制御する JavaScript メソッド_JavaScript スキル

リストボックス項目を上下に移動するように制御する JavaScript メソッド_JavaScript スキル

WBOYオリジナル: 2016-05-16 16:08:521122ブラウズ

この記事の例では、JavaScript を使用してリストボックス内の項目の上下の移動を制御する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

この JS コードは、リストボックス内の要素を上下に移動するように制御できます。この機能は非常に便利です。以下は詳細なコードです

コードをコピーコードは次のとおりです。

function listbox_move(listID, direct) {

var listbox = document.getElementById(listID);

var selIndex = listbox.selectedIndex;

If(-1 == selIndex) {

alert("移動するオプションを選択してください。");

return;

}

var 増分 = -1;

If(方向 == '上')

インクリメント = -1;

それ以外

増分 = 1;

If((selIndex 増分) 
(selIndex の増分) > (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 増分].value = selValue;

Listbox.options[selIndex 増分].text = selText;

Listbox.selectedIndex = selIndex 増分;

}

//..

//..

listbox_move('countryList', 'up'); //選択したオプションを上に移動します

listbox_move('countryList', 'down') //選択したオプションを下に移動します

以下はブラウザで使用できる詳細なデモコードです

コードをコピーコードは次のとおりです:

下のボタンをクリックして、選択ボックスからすべてのオプションを選択または選択解除します。