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:

<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:

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

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

let 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:

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

Eğer listemizde value nitelikleri yoksa, select'in value özelliğine, seçmek istediğimiz option etiketinin metnini yazmamız gerekir.

İsimleri aylar olan bir açılır liste yapın. JavaScript'in varsayılan olarak bu listede geçerli ayı seçmesini sağlayın.