Metode JavaScript untuk mengontrol pergerakan item naik dan turun di ListBox ListBox

Artikel ini menjelaskan metode JavaScript untuk mengontrol pergerakan item naik dan turun dalam kotak daftar ListBox. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:

Kode JS ini dapat mengontrol elemen di ListBox untuk naik atau turun, yang sangat berguna. Di bawah ini adalah kode terperinci

Salinan kode adalah sebagai berikut: function listbox_move (listid, arah) {

var listbox = document.getElementById (listId);

var selIndex = listbox.selectedIndex;

if (-1 == selIndex) {

peringatan ("Pilih opsi untuk pindah.");

kembali;

}

var increment = -1;

if (arah == 'up')

kenaikan = -1;

kalau tidak

kenaikan = 1;

if ((selIndex + increment) <0 ||

(selIndex + increment)> (listbox.options.length-1)) {

kembali;

}

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'); // Naikkan opsi yang dipilih

listbox_move ('countrylist', 'down'); // Pindahkan opsi yang dipilih

Di bawah ini adalah kode demonstrasi terperinci yang dapat digunakan di browser

Salin kode sebagai berikut: Klik tombol di bawah ini untuk memilih atau membatalkan pilihan semua opsi dari kotak pilih. <br>

<Pilih id = "lsbox" name = "lsbox" size = "10" multipel = "">

<Opsi value = "1"> India </pection>

<Option value = "2"> Amerika Serikat </pection>

<Opsi Value = "3"> China </pection>

<Option value = "4"> Italia </pection>

<Option value = "5"> Jerman </pection>

<Opsi Value = "6"> Canada </pection>

<Option value = "7"> Prancis </pection>

<Option value = "8"> Inggris </pect>

</pilih> <br>

<tombol onClick = "ListBoxMove ('LSbox', 'UP');"> Pindahkan ke atas </button>

<tombol onClick = "ListBoxMove ('lsbox', 'down');"> Pindah ke bawah </button>

<script>

function listBoxMove (listId, arah) {

var listbox = document.getElementById (listId);

var selIndex = listbox.selectedIndex;

if (-1 == selIndex) {

peringatan ("Pilih opsi untuk pindah.");

kembali;

}

var increment = -1;

if (arah == 'up')

kenaikan = -1;

kalau tidak

kenaikan = 1;

if ((selIndex + increment) <0 ||

(selIndex + increment)> (listbox.options.length-1)) {

kembali;

}

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>

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.