Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Akcje wykonywane po wybraniu opcji w <SELECT>
Forum PHP.pl > Forum > Przedszkole
castagir
Witam

Nie mogę znaleźć w internecie, a sam całkowicie nie mam głowy jak powinienem napisać skrypt JS aby wykrywał opcję wybraną w <SELECT>.
Dodam, że używam biblioteki JQuery.

  1. <select class="listaMozliwosci">
  2. <option value="opcja1">Wyswietl obrazki</option>
  3. <option value="opcja2">Wyswietl tekst</option>
  4. <option value="opcja3">Weź kredyt 200%</option>


Chodzi o coś takiego, że po wybraniu którejś z opcji, zostaje uruchomiona funkcja, która najpierw za pomocą testu "if(...)", sprawdza jaka opcja została wykonana a później np w odpowiednim DIV'ie umieszcza jakąś treść, lub ją wyłącza itp.

Z góry dziękuję.

Comandeer
Przyda Ci się zdarzenie change
castagir
Wciąż nic.

Mam coś takiego:
  1. <div id="oknaDynamiczne">
  2. <div class="oknoC"> // Począwszy od tego znacznika aż po ostatni najgłębiej zagnieżdżony, jest dodawany za pomocą AJAXa.
  3. <div class="budynekAdministracyjny">
  4. <input type="hidden" value2="Miasteczko" value="SSI7" name="aktualnaInstancja">
  5. <input type="hidden" value2="0" value="0:LU01DS1" name="IDinfrastruktury">
  6. <h3>Dom Starszyzny</h3>
  7. <div class="menuBudynku">
  8. <div class="podglad">
  9. <div class="menuAdministracja">
  10. <div class="podgladAdministracja">
  11. <h3>Finanse i zasoby Miasteczko</h3>
  12. <h4 style="text-align:center;">Projekt nowej iwnestycji:</h4>
  13. <table style="margin:auto auto 20px;">
  14. <tr>
  15. <tr>
  16. <tr>
  17. <td>Rodzaj inwestycji:</td>
  18. <td>
  19. <select style="width:297px;">
  20. <option value="wybierzInwestycje">Wybierz rodzaj inwestycji</option>
  21. <option value="INW01infr">Infrastruktura</option>
  22. </td>
  23. </tr>
  24. <div class="rozwiniecieInwestycji"></div>
  25. <table style="width:580px;margin:auto;">
  26. <table style="width:580px;margin:auto;">
  27. <table style="width:600px;border:1px solid black;text-align:center;margin:auto auto 30px;">
  28. <table style="width:600px;border:1px solid black;text-align:center;margin:auto auto 30px;">
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>



Problem jest w tym, że zwykłe change nie działa, gdy cały select znajduje się od początku na stronie, lecz moja strona jest uzupełniana dynamicznie za pomocą AJAXa.
Próbowałem także z kombinacją:
  1. $('#oknaDynamiczne').on('change', '.rodzajInwestycji', function(){


Nie mam pojęcia co robić. Chyba rzucę to w **** i wyjadę w Bieszczady.
ctom
to może dodaj tą klasę "rodzajInwestycji" to swojego selecta .... bo delegujesz event do obiektu, którego nie ma w Twoim kodzie
castagir
fakt. Nie dodałem class do znacnzika SELECT.

Mimo to wciąż nic się nie dzieje. Ani rozwiązanie:
  1. $('#oknaDynamiczne').on('change', '.rodzajInwestycji', function(){...});


ani:
  1. $('.rodzajInwestycji').change(function(){...});
ctom
hmm.. gdy ładujesz dynamicznie pierwsza opcja powinna działać ... druga nie ...

ale tego div#oknaDynamiczne masz od początku i do niego ładujesz content ?
castagir
div #oknaDynamiczne jest od samego początku.

Ładuję wszystkie funkcje za pomocą pierwszego sposobu, ładując content włąśnie od tego diva i działają. Nie wiem dlaczego to akurat nie działa
ctom
może tak głupio zapytam - ale skąd wiesz, że nie działa ? wypluwasz coś sobie do konsoli by to sprawdzić ?
castagir
zawsze dodaje w funkcji alert z jakimś napisem, na znak, że funkcja zadziałała. Niestety nic się nie pokazuje
ctom
a sprawdzałeś gdy się zaladuje ajax i w konsoli dasz $('#oknaDynamiczne').on('change', '.rodzajInwestycji', function(){ alert('zmiana'); });
to masz alert przy zmianie , tak ?
castagir
Działa wreszcie. Będę musiał po prostu funkcję umieścić w poprzednim zapytaniu ajaxa i po problemie biggrin.gif
Dzięki za pomoc i czas poświęcony.
ctom
to Ty dynamicznie też dodajesz JS a nie sam content ?
jak już skończysz podeślij mi link na PW - z czystej ciekawości chciałbym zobaczyć ten problem :-)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.