Açılır Liste Seçilen Öğe Numarası

Select elemanlarında, şu anda seçili olan liste öğesinin numarasını saklayan özel bir selectedIndex özelliği bulunur. Numaralandırma bu durumda sıfırdan başlar. Bu özellik hem okunabilir hem de yazılabilir, böylece seçili liste öğesi değiştirilebilir.

Bu özellikle çalışmayı bir örnek üzerinde inceleyelim. Aşağıdaki açılır listemiz olduğunu varsayalım:

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

Şimdi seçili liste öğesinin numarasını çıktılayalım:

let select = document.querySelector('#select');
console.log(select.selectedIndex); // 1 yazdırır

Şimdi başka bir öğe seçelim:

let select = document.querySelector('#select');
select.selectedIndex = 2; // 'üç' öğesini seçer

Bir input ve bir select elemanı verilmiştir. Inputa bir sayı girilir. Odak kaybında, listede inputun değerine eşit numaralı öğeyi seçili yapın.

Haftanın gün isimlerinden oluşan bir açılır liste yapın. JavaScript ile varsayılan olarak bu listede mevcut günü seçecek şekilde ayarlayın.