Arkadaşlar aşağıda kullandığım kodu yazdım. Çalışması gerektiğini düşünüyorum ama bir türlü çalıştıramadım.
Sweetalert2 kütüphanesi kullanıyorum. 2 adet select input alanım var.
id="first-select" alanında ki seçeneklerden value="option2" seçeneğini seçtiğimde id="second-select" olan inputun görünür olmasını sağlamaya çalışıyorum ve bunu dinamik olarak yapmaya çalışıyorum fakat başaramadım.
Yardımcı olabilecek var mı?
Kod bu şekilde:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
function showModal() {
Swal.fire({
title: 'Select Options',
html: `
<select id="first-select">
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<br><br>
<select id="second-select" style="display:none;">
<option value="">Select an option</option>
<option value="suboption1">Suboption 1</option>
<option value="suboption2">Suboption 2</option>
</select>
`,
showCancelButton: true,
confirmButtonText: 'Submit',
})
}
const firstSelect = document.getElementById("first-select");
const secondSelect = document.getElementById("second-select");
firstSelect.addEventListener("change", function() {
if (firstSelect.value === "option2") {
secondSelect.style.display = "block";
} else {
secondSelect.style.display = "none";
}
});
</script>
</head>
<body>
<button onclick="showModal()">Show Modal</button>
</body>
</html>