Select & Option İçindeki Bir Seçeneği Seçtiğinizde Yeni/Gizli Input Ortaya Çıksın
Bu işlemi yapmak için, HTML'de select etiketi ve option etiketlerini kullanabilirsiniz. Seçeneklerin yanında bir onchange olayı ekleyerek, select öğesinin değeri değiştiğinde bir JavaScript işlevi çağırabilirsiniz. Bu işlev, seçilen seçenek kontrol eder ve gizli olan input öğesini görünür hale getirir.
Aşağıdaki örnek kod, seçenekler arasında "Havale-EFT" seçeneği seçildiğinde input öğesini görünür hale getirir:
Yukarıdaki kodda, select etiketinde bir onchange olayı tanımlanır ve showInput() adlı bir JavaScript işlevi çağrılır. Bu işlev, seçilen seçeneği kontrol eder ve havale-eft-info adlı input öğesini görünür hale getirir veya gizler.
input öğesi başlangıçta style="display:none" özelliği ile gizlidir. JavaScript işlevi, display özelliğini "block" olarak ayarlayarak, input öğesini görünür hale getirir.
Bu işlemi yapmak için, HTML'de select etiketi ve option etiketlerini kullanabilirsiniz. Seçeneklerin yanında bir onchange olayı ekleyerek, select öğesinin değeri değiştiğinde bir JavaScript işlevi çağırabilirsiniz. Bu işlev, seçilen seçenek kontrol eder ve gizli olan input öğesini görünür hale getirir.
Aşağıdaki örnek kod, seçenekler arasında "Havale-EFT" seçeneği seçildiğinde input öğesini görünür hale getirir:
HTML:
<select id="payment-method" onchange="showInput()">
<option value="">Lütfen bir ödeme yöntemi seçin</option>
<option value="credit-card">Kredi kartı</option>
<option value="havale-eft">Havale-EFT</option>
<option value="paypal">PayPal</option>
</select>
<input type="text" id="havale-eft-info" style="display:none" placeholder="Havale-EFT bilgileri">
<script>
function showInput() {
var paymentMethod = document.getElementById("payment-method");
var havaleEftInfo = document.getElementById("havale-eft-info");
if (paymentMethod.value === "havale-eft") {
havaleEftInfo.style.display = "block";
} else {
havaleEftInfo.style.display = "none";
}
}
</script>
Yukarıdaki kodda, select etiketinde bir onchange olayı tanımlanır ve showInput() adlı bir JavaScript işlevi çağrılır. Bu işlev, seçilen seçeneği kontrol eder ve havale-eft-info adlı input öğesini görünür hale getirir veya gizler.
input öğesi başlangıçta style="display:none" özelliği ile gizlidir. JavaScript işlevi, display özelliğini "block" olarak ayarlayarak, input öğesini görünür hale getirir.