การใช้งาน GUI create ListBox ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

# การใช้งาน GUI: สร้าง ListBox ในภาษา JavaScript

ในโลกแห่งการเขียนโปรแกรม, การทำให้ผู้ใช้สามารถโต้ตอบกับโปรแกรมของเราได้เป็นสิ่งสำคัญยิ่ง หนึ่งในส่วนประกอบ GUI (Graphical User Interface) ที่มักใช้กันเป็นอย่างมากคือ ListBox ที่ให้ผู้ใช้สามารถเลือกข้อมูลจากรายการต่างๆได้ ในภาษา JavaScript, การสร้าง ListBox ทำได้ง่ายดายและสามารถปรับแต่งได้อย่างมาก ซึ่งเป็นตัวขับเคลื่อนพลังในการพัฒนาเว็บและแอปพลิเคชันสมัยใหม่

ตัวอย่าง CODE ที่ 1: การสร้าง ListBox พื้นฐาน

ลองมาเริ่มต้นด้วยตัวอย่างพื้นฐานของการสร้าง ListBox ใน HTML และ JavaScript กันก่อน:

 <!DOCTYPE html>
<html>
<body>

<select id="myListBox">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="mango">Mango</option>
</select>

<script>
document.getElementById('myListBox').onchange = function() {
  alert('คุณเลือก: ' + this.value);
};
</script>

</body>
</html>

โค้ดนี้สร้าง ListBox ขึ้นมาภายในหน้าเว็บ ซึ่งผู้ใช้สามารถเลือกผลไม้จากรายการที่ให้ไว้และเมื่อมีการเปลี่ยนแปลงค่าภายใน ListBox (`onchange`), จะมีการแสดงข้อความแจ้งให้ทราบถึงการเลือกที่ทำผ่านการ alert

ตัวอย่าง CODE ที่ 2: การเพิ่มข้อมูลเข้า ListBox ด้วย JavaScript

การจัดการข้อมูลใน ListBox ขั้นสูงขึ้นมาหน่อย เราจะใช้ JavaScript เพื่อเพิ่มข้อมูลเข้าไป:

 <!DOCTYPE html>
<html>
<body>

<select id="myDynamicListBox"></select>

<script>
const fruits = ['apple', 'orange', 'banana', 'mango'];
const listBox = document.getElementById('myDynamicListBox');

// เพิ่มข้อมูลผลไม้เข้าไปใน ListBox
fruits.forEach(function (fruit) {
    let option = document.createElement('option');
    option.value = fruit;
    option.text = fruit.charAt(0).toUpperCase() + fruit.slice(1);
    listBox.appendChild(option);
});
</script>

</body>
</html>

ในตัวอย่างนี้, พวกเราได้เริ่มต้นด้วย ListBox ที่ว่างเปล่าและใช้ JavaScript เพื่อเติมข้อมูลเข้าไป จะเห็นว่าเราสามารถควบคุมการเพิ่มข้อมูลได้อย่างอิสระ เพียงใช้ลูป `forEach` เพื่อวนซ้ำและสร้างตัวเลือกใหม่ ๆ เพิ่มเข้าไปใน ListBox

ตัวอย่าง CODE ที่ 3: การเรียกใช้ข้อมูลจาก ListBox และปรับใช้กับ function อื่น

ตอนนี้, มาดูว่าการจับคู่ ListBox กับ JavaScript function(s) ยังไงเพื่อสร้างปฏิสัมพันธ์ที่ซับซ้อนกันบ้าง:

 <!DOCTYPE html>
<html>
<body>

<select id="myInteractiveListBox">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <!-- เพิ่มตัวเลือกอื่น ๆ ตามต้องการ -->
</select>

<div id="fruitDescription"></div>

<script>
const descriptions = {
  apple: 'Apple is delicious and crispy.',
  orange: 'Orange is full of Vitamin C.',
  // เพิ่มคำอธิบายอื่น ๆ สำหรับผลไม้ตามต้องการ
};

const listBox = document.getElementById('myInteractiveListBox');
const descriptionDiv = document.getElementById('fruitDescription');

listBox.onchange = function() {
  descriptionDiv.innerHTML = descriptions[this.value] || 'Please select a fruit.';
};
</script>

</body>
</html>

ที่นี่เรามี ListBox ที่ทำงานร่วมกับเอเลเมนต์ `

` ที่เข้ารหัสไว้บน HTML เพื่อแสดงคำอธิบายของผลไม้ที่เลือก จากตัวอย่างนี้ เราได้เรียนรู้ถึงวิธีการผสมผสานข้อมูลและการแสดงผลของ JavaScript กับ HTML ได้อย่างมีประสิทธิภาพ

Usecase ในโลกจริง

คุณคงสังเกตได้ว่า ListBox เป็นส่วนสำคัญในการสร้างแบบฟอร์มและหน้าเว็บต่างๆ ช่วยให้ผู้ใช้สามารถเลือกได้จากรายการต่างๆ เช่นการเลือกประเทศในฟอร์มการจัดส่ง, การเลือกหลักสูตรในการลงทะเบียนเรียน, หรือแม้กระทั่งการสั่งผลิตภัณฑ์ตามสเปคที่ต้องการ

หากคุณอยากเรียนรู้การเขียนโค้ดเพิ่มเติมและต้องการพัฒนาเว็บแอปพลิเคชั่นที่มีประสิทธิภาพ ที่ EPT (Expert-Programming-Tutor) เรามีหลักสูตรการเขียนโปรแกรมที่จะช่วยให้คุณเข้าใจการใช้ภาษา JavaScript และเทคนิคต่าง ๆ ในการสร้าง GUI ที่มีประสิทธิภาพซึ่งเป็นทักษะที่มีค่าในตลาดงานปัจจุบันและอนาคตอันใกล้นี้ จงเริ่มต้นเส้นทางโค้ดของคุณไปกับเราที่ EPT วันนี้!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

Tag ที่น่าสนใจ: gui listbox javascript html programming web_development frontend event_handling code_example interactive function data_manipulation web_application user_interface expert_programming

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

การใช้งาน GUI create ListBox ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

ตัวอย่าง CODE ที่ 1: การสร้าง ListBox พื้นฐาน

ตัวอย่าง CODE ที่ 2: การเพิ่มข้อมูลเข้า ListBox ด้วย JavaScript

ตัวอย่าง CODE ที่ 3: การเรียกใช้ข้อมูลจาก ListBox และปรับใช้กับ function อื่น

Usecase ในโลกจริง

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR รับสอนเขียนโปรแกรมคอมพิวเตอร์

JavaScript

การใช้งาน GUI create ListBox ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

ตัวอย่าง CODE ที่ 1: การสร้าง ListBox พื้นฐาน

ตัวอย่าง CODE ที่ 2: การเพิ่มข้อมูลเข้า ListBox ด้วย JavaScript

ตัวอย่าง CODE ที่ 3: การเรียกใช้ข้อมูลจาก ListBox และปรับใช้กับ function อื่น

Usecase ในโลกจริง

บทความนี้อาจจะมีที่ผิด กรุณาตรวจสอบก่อนใช้

ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

ติดต่อเราได้ที่

EXPERT-PROGRAMMING-TUTOR
รับสอนเขียนโปรแกรมคอมพิวเตอร์