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

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

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

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

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

และมีปุ่ม:

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

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

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

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

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