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

この記事の例では、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') //選択したオプションを下に移動します

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

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

下のボタンをクリックして、選択ボックスからすべてのオプションを選択または選択解除します。
   
        インド
        米国
        中国
        イタリア
        ドイツ
        カナダ
        フランス
        イギリス
    選択>

上に移動
下に移動

function listboxMove(リストID, 方向) {
    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;
    if(-1 == selIndex) {
        alert("移動するオプションを選択してください。");
        戻る;
    }
    var 増分 = -1;
    if(方向 == '上')
        インクリメント = -1;
    それ以外
        増分 = 1;
    if((selIndex 増分)         (selIndex インクリメント) > (listbox.options.length-1)) {
        戻る;
    }
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex増加].value
    listbox.options[selIndex].text = listbox.options[selIndex増加].text
    listbox.options[selIndex 増分].value = selValue;
    listbox.options[selIndex 増分].text = selText;
    listbox.selectedIndex = selIndex 増分;
}

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。