SweetAlert2 kütüphanesi ile dinamik select elementi görüntüleme.

30-01-2023, 10:53:19

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>

30-01-2023, 10:58:14

#2

eycreative

https://eminylmz.dev/javascript-elem...e-gizle-goster Makaleme göz atmanızı öneririm hocam.

30-01-2023, 11:01:31

#3

Creative08

Sweet alert daha oluşmadan içeride ki objeye erişmeye çalışıyorsunuz bu sebeple addEventListener'dan hata alıyorsunuz.

kodu aşağıda ki gibi güncelleyip tekrar deneyiniz;

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

30-01-2023, 11:08:48

#4

CoderMaN

eycreative adlı üyeden alıntı: mesajı görüntüle

https://eminylmz.dev/javascript-elem...e-gizle-goster Makaleme göz atmanızı öneririm hocam.

Temanız güzelmiş hocam sakıncası yoksa öğrenebilir miyim nereden temin ettiniz.

30-01-2023, 11:12:33

#5

eycreative

CoderMaN adlı üyeden alıntı: mesajı görüntüle

Temanız güzelmiş hocam sakıncası yoksa öğrenebilir miyim nereden temin ettiniz.

Front-End ve Back-End olarak bana ait hocam. Kendime özel bir şeyler yapmaya çalıştım. Teşekkür ederim.

30-01-2023, 11:26:11

#6

Tncr

Creative08 adlı üyeden alıntı: mesajı görüntüle

Sweet alert daha oluşmadan içeride ki objeye erişmeye çalışıyorsunuz bu sebeple addEventListener'dan hata alıyorsunuz.

kodu aşağıda ki gibi güncelleyip tekrar deneyiniz;

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

Teşekkür ederim, ihtiyacım olan şekilde çalışıyor.