Αλλαγή του επιλεγμένου στοιχείου λίστας σε 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';
});