JavaScript ile Seçilen Liste Öğesini Değiştirme

Önceki derste, bir listeden seçilen öğeyi nasıl alacağımızı öğrendik. Şimdi ise JavaScript kullanarak seçili öğeyi değiştirelim.

Bunun için, select elementinin value özelliğine, seçmek istediğimiz option'ın value niteliğinin değerini yazıyoruz.

Aşağıdaki gibi bir select'imiz olduğunu varsayalım:

html<select id="select">
  <option value="one">bir</option>
  <option value="two" selected>iki</option>
  <option value="three">üç</option>
</select>

Ayrıca bir buton olduğunu varsayalım:

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

Select ve buton için referansları değişkenlere alalım:

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

Şimdi de butona tıklandığında select'in seçiminin değişmesini sağlayalım:

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