เมื่อคุณเรียนรู้วิธีสร้างเว็บฟอร์ม งานทั่วไปอย่างหนึ่งคือการรับค่าจากดรอปดาวน์ ในบทความนี้ เราจะมาเรียนรู้วิธีรับค่าดังกล่าวด้วย JavaScript
องค์ประกอบ HTML แบบเลื่อนลง
มาสรุปสั้นๆ เกี่ยวกับวิธีสร้างองค์ประกอบดรอปดาวน์โดยใช้ HTML กัน โปรดปฏิบัติตาม Codepen ของฉันหากคุณหลงทาง
ในการสร้างองค์ประกอบดรอปดาวน์ เราจำเป็นต้องใช้ select
แท็กและใช้ option
เด็ก ๆ ซ้อนอยู่ใต้มัน องค์ประกอบที่เลือกจะสร้างรายการแบบเลื่อนลงและด้วยแท็กตัวเลือกเราจะกำหนดตัวเลือกเหล่านั้นที่จะแสดงรายการแบบเลื่อนลง
มาสร้างรายการผลไม้ที่เราโปรดปราน (ที่มีอิโมจิ) แบบเลื่อนลง
<select name="fruits" id="fruits"> <option value="">--select--</option> <option value="avocado">Avocado🥑</option> <option value="watermelon">Watermelon🍉</option> <option value="kiwi">Kiwi🥝</option> <option value="tomato">Tomato🍅</option> </select> <h2 id="pick"></h2>
เราได้เพิ่ม h2 ว่างที่เราจะเติมด้วย JavaScript ในภายหลัง ณ จุดนี้ คุณสามารถเลือกผลไม้ที่ชอบได้:
![วิธีรับค่าดร็อปดาวน์ด้วย JavaScript](/article/uploadfiles/202203/2022033016305478.jpg)
สังเกต ความสำคัญของคุณสมบัติมูลค่า . คุณสมบัตินี้ให้ข้อมูลที่ไม่ใช่สไตล์ที่เราสามารถเล่นกับ JavaScript ได้อย่างง่ายดาย ในทางกลับกัน ข้อความในแท็กตัวเลือกสามารถเป็นอะไรก็ได้ ดังนั้นจึงไม่น่าเชื่อถือ คุณค่าของคุณสมบัติคือสิ่งสำคัญที่นี่
การเลือกและการแสดงค่าดร็อปดาวน์ด้วย JavaScript
ก่อนอื่นเราต้องเลือกเมนูผลไม้ดรอปดาวน์โดยใช้ getElementById
บนแท็กเลือก
const element = document.getElementById("fruits");
เมื่อเลือกแบบเลื่อนลงแล้ว เราก็สามารถรับค่าของตัวเลือกที่เลือกอยู่ในปัจจุบันได้ โดยค่าเริ่มต้นคือตัวเลือกแรก มาลองดูกัน:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
const checkValue = element.options[element.selectedIndex].value; const checkText = element.options[element.selectedIndex].text;
ที่นี่เรากำลังเข้าถึงแอตทริบิวต์อาร์เรย์ตัวเลือกองค์ประกอบ จากนั้นเราเลือกดัชนีของตัวเลือกที่เลือกในปัจจุบันและเข้าถึงค่าหรือข้อความ
ตอนนี้ลอง console.log ทั้งสองตัวแปร เกิดอะไรขึ้น? ไม่มีอะไร. ทำไม? เนื่องจากองค์ประกอบแรกของเรามีค่าว่าง (เป็นเพียงตัวยึดตำแหน่ง) แสดงความคิดเห็นตัวเลือกแรกแล้วลองอีกครั้ง เย้! เราได้รับทั้งค่าและข้อความด้วยจาวาสคริปต์
การฟังการเปลี่ยนแปลงแบบเลื่อนลงด้วย JavaScript
เราควรทำให้ดรอปดาวน์ของเราเป็นไดนามิก เนื่องจาก JavaScript ได้รับการออกแบบมาเพื่อตอบสนองต่อการเปลี่ยนแปลงในหน้าของคุณ โดยที่ในใจเราจะกำหนด eventListener
สู่ธาตุผลไม้ของเรา
element.addEventListener("change", (e) => { const value = e.target.value; const text = element.options[element.selectedIndex].text; if (value) { document.getElementById("pick").textContent = `Value Selected: ${value}`; } else { document.getElementById("pick").textContent = ""; } });
ด้วย eventListener
. ของเรา เรากำลังรับฟังการเปลี่ยนแปลงในรายการแบบเลื่อนลงของเรา สังเกตว่าคุณจะรับค่าของตัวเลือกที่เลือกได้อย่างไรโดยทำ e.target.value
นี้คุณอาจเคยเห็นในบทช่วยสอนอื่นเกี่ยวกับแบบฟอร์ม
เรามาถึงแล้ว ตอนนี้คุณสามารถเลือกตัวเลือกผลไม้ใดก็ได้ และ JavaScript จะตอบสนองต่อการเปลี่ยนแปลงในรายการแบบเลื่อนลงของเราและอัปเดต h2 ของเราตามลำดับ มีผลมากใช่มั้ย!
![วิธีรับค่าดร็อปดาวน์ด้วย JavaScript](/article/uploadfiles/202203/2022033016305403.jpg)
บทสรุป
การรับค่าแบบเลื่อนลงเป็นทักษะที่สำคัญเมื่อคุณเรียนรู้การพัฒนาเว็บ ค่าที่เราได้รับมีความสำคัญหากเราต้องการอัปเดตฐานข้อมูล แสดงการเลือกต่อผู้ใช้ หรือเพียงแค่ 'ตอบสนอง' ต่อการเปลี่ยนแปลง DOM ด้วย JavaScript เราสามารถรับค่าดังกล่าวได้ในเวลาไม่นาน