การเปลี่ยนรายการที่เลือกในรายการด้วย JavaScript

ในบทเรียนที่แล้วเราได้เรียนรู้วิธีการรับ รายการที่เลือกในรายการ มาดูกันตอนนี้ว่า จะเปลี่ยนรายการที่เลือกด้วย JavaScript ได้อย่างไร

ในการทำเช่นนี้ เราต้องกำหนดค่าให้กับคุณสมบัติ value ของ select เป็นค่าของแอตทริบิวต์ value ของ option ที่เราต้องการเลือก

สมมติว่าเรามี select ต่อไปนี้:

<select id="select">
	<option value="one">หนึ่ง</option>
	<option value="two" selected>สอง</option>
	<option value="three">สาม</option>
</select>

และมีปุ่ม:

<input type="submit" id="button">

รับลิงก์ไปยัง select และปุ่มในตัวแปร:

let select = document.querySelector('#select');
let button = document.querySelector('#button');

ตอนนี้ เรามาทำให้ เมื่อคลิกที่ปุ่ม select ของเราเปลี่ยนการเลือก:

button.addEventListener('click', function() {
	select.value = 'one';
});

หากรายการของเราไม่มีแอตทริบิวต์ value, ก็ต้องกำหนดข้อความของแท็ก option ที่ เราต้องการเลือกให้กับคุณสมบัติ value ของ select

สร้างรายการแบบเลื่อนลงที่มีชื่อเดือน ทำให้ JavaScript เลือกเดือนปัจจุบันในรายการนี้โดยค่าเริ่มต้น