วิธีรับค่าดร็อปดาวน์ด้วย JavaScript

เมื่อคุณเรียนรู้วิธีสร้างเว็บฟอร์ม งานทั่วไปอย่างหนึ่งคือการรับค่าจากดรอปดาวน์ ในบทความนี้ เราจะมาเรียนรู้วิธีรับค่าดังกล่าวด้วย 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 ได้อย่างง่ายดาย ในทางกลับกัน ข้อความในแท็กตัวเลือกสามารถเป็นอะไรก็ได้ ดังนั้นจึงไม่น่าเชื่อถือ คุณค่าของคุณสมบัติคือสิ่งสำคัญที่นี่

การเลือกและการแสดงค่าดร็อปดาวน์ด้วย 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 ของเราตามลำดับ มีผลมากใช่มั้ย!

บทสรุป

การรับค่าแบบเลื่อนลงเป็นทักษะที่สำคัญเมื่อคุณเรียนรู้การพัฒนาเว็บ ค่าที่เราได้รับมีความสำคัญหากเราต้องการอัปเดตฐานข้อมูล แสดงการเลือกต่อผู้ใช้ หรือเพียงแค่ 'ตอบสนอง' ต่อการเปลี่ยนแปลง DOM ด้วย JavaScript เราสามารถรับค่าดังกล่าวได้ในเวลาไม่นาน