JavaScript mengontrol cara bertukar data kiri dan kanan untuk dua kotak daftar

Artikel ini menjelaskan metode JavaScript yang mengendalikan dua kotak daftar untuk bertukar data kiri dan kanan. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:

Kami sering menggunakan fungsi ini, yang dapat memindahkan semua elemen kotak daftar kiri ke kanan, atau memindahkan semua elemen kotak daftar kanan ke kiri, atau memindahkan semua elemen kotak daftar kanan ke kiri, atau memindahkannya sekaligus.

Salinan kode adalah sebagai berikut: function listbox_movecross (sourceId, destId) {

var src = document.geteLementById (sourceId);

var dest = document.geteLementById (destId);

untuk (var count = 0; count <src.options.length; count ++) {

if (src.options [count] .destected == true) {

var opsi = src.options [count];

var newoption = document.createelement ("opsi");

newoption.value = option.value;

newoption.text = option.text;

newOption.Selected = true;

mencoba {

dest.add (newoption, null); //Standar

src.remove (Count, null);

} catch (error) {

dest.add (newoption); // IE saja

src.remove (Count);

}

menghitung--;

}

}

}

// ..

listbox_movecross ('CountryList', 'SelectedCountryList');

Di bawah ini adalah kode efek demo yang dapat dieksekusi langsung di browser

Salin kode sebagai berikut: Klik tombol di bawah untuk memindahkan opsi yang dipilih kanan atau kiri. <br>

<able>

<tbody> <tr>

<td>

<Pilih id = "Sourceselect" size = "10" Multiple = "">

<Option value = "a"> Afghanistan </pection>

<Option value = "b"> Bahama </pection>

<Option value = "c"> Barbados </pection>

<Option value = "d"> Belgia </pect>

<Option value = "e"> Bhutan </pection>

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

<Option value = "g"> Kroasia </pection>

<Option value = "h"> Denmark </pection>

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

</pilih>

</td>

<td>

<Tombol OnClick = "ListBoxMovecross ('Sourceselect', 'DestSelect');" >>>> </button> <br>

<tombol onClick = "ListBoxMovecross ('destSelect', 'Sourceselect');"> <<</tombol>

</td>

<td>

<Pilih id = "destSelect" size = "10" multipel = "">

<Option value = "a"> Afghanistan </pection>

<Option value = "b"> Bahama </pection>

<Option value = "c"> Barbados </pection>

<Option value = "d"> Belgia </pect>

<Option value = "e"> Bhutan </pection>

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

<Option value = "g"> Kroasia </pection>

<Option value = "h"> Denmark </pection>

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

</pilih>

</td>

</tr>

</tbody> </boable>

<script>

function listboxmovecross (sourceId, destId) {

var src = document.geteLementById (sourceId);

var dest = document.geteLementById (destId);

untuk (var count = 0; count <src.options.length; count ++) {

if (src.options [count] .destected == true) {

var opsi = src.options [count];

var newoption = document.createelement ("opsi");

newoption.value = option.value;

newoption.text = option.text;

newOption.Selected = true;

mencoba {

dest.add (newoption, null); //Standar

src.remove (Count, null);

} catch (error) {

dest.add (newoption); // IE saja

src.remove (Count);

}

menghitung--;

}

}

}

</script>

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.