JavaScript ควบคุมวิธีการแลกเปลี่ยนข้อมูลซ้ายและขวาสำหรับสองกล่องรายการ

บทความนี้อธิบายวิธีการของ JavaScript ที่ควบคุมสองกล่องรายการเพื่อแลกเปลี่ยนข้อมูลซ้ายและขวา แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:

เรามักจะใช้ฟังก์ชั่นนี้ซึ่งสามารถย้ายองค์ประกอบทั้งหมดของกล่องรายการด้านซ้ายไปทางขวาหรือย้ายองค์ประกอบทั้งหมดของกล่องรายการด้านขวาไปทางซ้ายหรือย้ายองค์ประกอบทั้งหมดของกล่องรายการขวาไปทางซ้ายหรือย้ายไปทันที

การคัดลอกรหัสมีดังนี้: ฟังก์ชั่น listbox_movecross (sourceId, destId) {

var src = document.getElementById (sourceId);

var dest = document.getElementById (destId);

สำหรับ (var count = 0; count <src.options.length; count ++) {

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

ตัวเลือก var = src.options [นับ];

var newOption = document.createElement ("ตัวเลือก");

newOption.value = ตัวเลือก. value;

newOption.Text = opption.text;

newOption.Selected = true;

พยายาม {

DEST.ADD (NewOption, NULL); //มาตรฐาน

src.remove (นับ, โมฆะ);

} catch (ข้อผิดพลาด) {

DEST.ADD (NewOption); // คือเท่านั้น

src.remove (นับ);

-

นับ--;

-

-

-

-

ListBox_MoveCross ('CountryList', 'SelectedCountryList');

ด้านล่างเป็นรหัสเอฟเฟกต์การสาธิตที่สามารถดำเนินการโดยตรงในเบราว์เซอร์

คัดลอกรหัสดังนี้: คลิกปุ่มด้านล่างเพื่อย้ายตัวเลือกที่เลือกไว้ทางขวาหรือซ้าย <br>

<table>

<tbody> <tr>

<td>

<select id = "sourceselect" size = "10" multility = "">

<ตัวเลือกค่า = "a"> อัฟกานิสถาน </portion>

<ตัวเลือกค่า = "b"> บาฮามาส </potion>

<ตัวเลือกค่า = "c"> บาร์เบโดส </potion>

<ตัวเลือกค่า = "d"> เบลเยียม </potion>

<ตัวเลือกค่า = "e"> ภูฏาน </potion>

<ตัวเลือกค่า = "f"> จีน </potion>

<ตัวเลือกค่า = "g"> โครเอเชีย </potion>

<ตัวเลือกค่า = "h"> เดนมาร์ก </potion>

<ตัวเลือกค่า = "i"> ฝรั่งเศส </potion>

</เลือก>

</td>

<td>

<ปุ่ม onclick = "ListBoxMoveCross ('Sourceselect', 'destSelect');" >>>> </button> <br>

<ปุ่ม onclick = "ListBoxMoveCross ('destselect', 'sourceselect');"> <<</ปุ่ม>

</td>

<td>

<select id = "destselect" size = "10" multriay = "">

<ตัวเลือกค่า = "a"> อัฟกานิสถาน </portion>

<ตัวเลือกค่า = "b"> บาฮามาส </potion>

<ตัวเลือกค่า = "c"> บาร์เบโดส </potion>

<ตัวเลือกค่า = "d"> เบลเยียม </potion>

<ตัวเลือกค่า = "e"> ภูฏาน </potion>

<ตัวเลือกค่า = "f"> จีน </potion>

<ตัวเลือกค่า = "g"> โครเอเชีย </potion>

<ตัวเลือกค่า = "h"> เดนมาร์ก </potion>

<ตัวเลือกค่า = "i"> ฝรั่งเศส </potion>

</เลือก>

</td>

</tr>

</tbody> </table>

<script>

ฟังก์ชั่น ListBoxMoveCross (sourceId, destId) {

var src = document.getElementById (sourceId);

var dest = document.getElementById (destId);

สำหรับ (var count = 0; count <src.options.length; count ++) {

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

ตัวเลือก var = src.options [นับ];

var newOption = document.createElement ("ตัวเลือก");

newOption.value = ตัวเลือก. value;

newOption.Text = opption.text;

newOption.Selected = true;

พยายาม {

DEST.ADD (NewOption, NULL); //มาตรฐาน

src.remove (นับ, โมฆะ);

} catch (ข้อผิดพลาด) {

DEST.ADD (NewOption); // คือเท่านั้น

src.remove (นับ);

-

นับ--;

-

-

-

</script>

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน